Tagged: full screen slider
-
AuthorPosts
-
March 6, 2021 at 1:19 am #1285953
Hi there,
We’re working on a demo site for a client:
The image above the fold on this page is built as a full screen slider. On Chrome / iMac 27″ display it works just fine. On Safari / same iMac 27″ and MacBook pro with trackpad it “shakes” or kinda bounces upon user scroll. Help?
March 6, 2021 at 9:05 am #1286005Hey jaimemerz,
I cannot reproduce the issue. Can you please make a screencast of the issue?
Best regards,
VictoriaMarch 8, 2021 at 8:06 pm #1286542March 9, 2021 at 12:00 am #1286579Why is it fixed on safari and on other browsers not – there it scrolls.
Safari is one browser that can not handle good the css with background-attachment : fixed.
there are workarounds here on board – to set the background-attachment : scroll and place a pseudo-container with the inherited image as background and place the pseudo-container on position : fixedEdit – may i ask you why you had to work with the slider? and not with a 100% color-section. this Element is not so performance intensive.
have a look at: https://webers-testseite.de/jaime/ – with safari/*********** Safari Fix for background-attachment: fixed **************/ /********* give a custom-class to the color-section: bg-fixed ***********/ /***** Set the image to background-attachment : scroll and : **********/ .avia-section.bg-fixed { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); background-size: 0 !important; overflow: hidden; position: relative; } .avia-section.bg-fixed:before { background-image: inherit !important; background-repeat: inherit !important; background-size: cover; background-position: inherit; content: ""; position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: -1 !important; pointer-events: none; will-change: transform; /*** if you got more than 3 images like this - comment this out ***/ }
-
AuthorPosts
- You must be logged in to reply to this topic.