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