MacOS Safari position:fixed jitter
ashthornton opened this issue · comments
This happens on pretty much all the sites I've tested with Lenis with elements that are position: fixed. The most common use for this is headers/navs and we're seeing the issue on one of our sites that we're testing Lenis out on.
Here is a recording of the issue.
(Excuse the phone recording, it's difficult to see when using the built-in Mac screen recorder for some reason)
And here are the specs for a couple of the machines we've tested this on:
Are you aware of any workarounds? We'd love to get Lenis on this project and this is the only thing blocking that.
Which version of Safari is it ?
My bad, that might be useful!
Version 15.3 (17612.4.9.1.8)
I can't reproduce on Safari 15.4 using M1 Macbook. So i'm wondering if it's Safari version related or hardware related
Yeah I suspect it to be hardware related. Not all machines show the issue and it seems to be the less capable ones.
It's almost as if the rendering of fixed elements becomes out of sync with the rendering of the main page since they're in different layers.
Interestingly on our project, we have a WebGL canvas rendering in the background and when it's active the header doesn't lag as much, whereas when it stops rendering the lag becomes more apparent.
Can you try will-change:transform on those lagging fixed element ? It should enable GPU rendering for this specific element
Just tested on Macbook Intel 2019 (Big Sur) on Safari 14.1 and I can't reproduce neither @ashthornton
Can you try
will-change:transformon those lagging fixed element ? It should enable GPU rendering for this specific element
This was the first thing I tried, along with transform: translate3d(0, 0, 0) and isolation: isolate, none of them solve the issue unfortunately.
I've just tried specifying the scroller wrapper and content elements manually to be elements on the page rather than window and body itself and it seems to have fixed the issue... interesting
I've just tried specifying the scroller wrapper and content elements manually to be elements on the page rather than window and body itself and it seems to have fixed the issue... interesting
Make sense.
It's maybe related to subpixel scrolling ? But honestly I have no clue what happen with this bug and even less how to fix it. Maybe worth leaving a webkit ticket
Experiencing a similar problem with Safari 15.4 on an 2017 intel based macbook . The navigation stays in place but the content is doing a lot a micro-jumps forth and back while scrolling, resulting in a flickering experience.
Hi guys !
Just wanted to share cause I have the same issue on Safari Version 15.3 - it's not the last one so i'll update it asap.
Hardware : I have a M1 Max Macbook 2021
Here is an example on the Lenis website :
Screen.Recording.2023-04-20.at.00.18.32.mov
same issue on safari but issue only persists on power saving / Low power mode.
Edit : It may sound strange, but I was able to fix it by getting rid of the font-style: italic property and using skew instead.
same issue on safari but issue only persists on power saving / Low power mode.
Edit : It may sound strange, but I was able to fix it by getting rid of the
font-style: italicproperty and using skew instead.
interesting...
About low power mode that's because Safari is capping requestAnimationFrame to 30fps so i advise you to disable Lenis on low power mode
maybe related https://github.com/studio-freight/lenis/issues/187
I had the same problem on Safari and FIrefox, MacOS Ventura 13.1.1. I use it with ScrollTrigger pinned section and it caused everything to flicker.
I'm pretty sure the fix for me was to set body as wrapper on lenis instance:
new Lenis({ wrapper: document.body });
Similar issue for me on a site I'm building (flickering on scroll in Safari v16.5.2). Setting the wrapper to document.body like @emsitkowski suggested did work for me. However, I found that if I instead just change the wheelEventsTarget: document.body that also worked.
I've tried both of the above options on two different sites, latest Lenis version, stripping all other CSS so it's completely vanilla and I'm still seeing the stuttering :(
I even tried setting both the wrapper and wheelEventsTarget to document.body with no luck either.