MacOS Safari position:fixed jitter

[ashthornton]

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.

[clementroche]

Which version of Safari is it ?

[ashthornton]

My bad, that might be useful!

Version 15.3 (17612.4.9.1.8)

[clementroche]

I can't reproduce on Safari 15.4 using M1 Macbook. So i'm wondering if it's Safari version related or hardware related

[ashthornton]

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.

[clementroche]

Can you try will-change:transform on those lagging fixed element ? It should enable GPU rendering for this specific element

[clementroche]

Just tested on Macbook Intel 2019 (Big Sur) on Safari 14.1 and I can't reproduce neither @ashthornton

[ashthornton]

Can you try will-change:transform on 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.

[ashthornton]

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

[clementroche]

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

[ww-wolt]

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.

[nicolasgermeaux]

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

[sushanyadav]

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.

[clementroche]

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.

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

[clementroche]

maybe related https://github.com/studio-freight/lenis/issues/187

[emsitkowski]

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 });

[vonscriptor]

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.

[ashthornton]

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.

[clementroche]

https://github.com/studio-freight/lenis/issues/266

[axherrm]

Are other sources causing the same issue known? I experience similar jitters but not just in Safari but also in some Firefox and chrome instances. With same Lenis & GSAP version but an older version of my website there were no such problems. Some speculations what can possible have broken this?

[iliketoplay]

Not related to position:fixed, but I have had luck (almost!?) fixing Safari wheel event bugs by doing two things:
1: when possible set pointer-events:none on images and video
2: add the wheel listener on more than just window/body, I wrap my content in a "main" tag and apply the listener to that. For some reason the wheel events are appearing on this main tag but often not on the window! Gotta love Safari

[laroccaf]

I can confirm the issue was related to power saving mode in my case, however, I noticed it's not just limited to when the battery is low or an iOS device is in battery saving mode. It also occurs on Mac laptops (old and new) when "Automatic Graphics Switching" is enabled in System Settings > Battery. This is the default setting, and it seems to take effect even when a laptop is plugged in, so it's a pretty big issue IMO. One potential solution would be to conditionally disable Lenis by listening to the BatteryManager JS API, but I don't think this directly correlates with Apple's power saving logic.