MacOS Safari position:fixed jitter

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

@ashthornton

Just tested on Macbook Intel 2019 (Big Sur) on Safari 14.1 and I can't reproduce neither @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.

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: 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

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

@emsitkowski

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.

#266

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?

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

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.

The funny thing is, the batteryManager is not supported on safari 😀

Seems like these issues are kind of a deal breaker to be able to use lenin? if it stutters like that even on a few people and we don't exactly know if and when, that's kind of a big deal ... dam

Might be related: https://codepen.io/GreenSock/pen/ExoyEyg/c0402caac3044c3f5bb85022450b059b

Navigation Menu

Repository navigation

MacOS Safari position:fixed jitter #103

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

MacOS Safari position:fixed jitter #103

Description

Activity

clementroche commented on Jan 19, 2023

ashthornton commented on Jan 19, 2023

clementroche commented on Jan 19, 2023

ashthornton commented on Jan 19, 2023

clementroche commented on Jan 19, 2023

clementroche commented on Jan 19, 2023

ashthornton commented on Jan 19, 2023

ashthornton commented on Jan 19, 2023

clementroche commented on Jan 19, 2023

ww-wolt commented on Mar 14, 2023

nicolasgermeaux commented on Apr 20, 2023

sushanyadav commented on Apr 23, 2023

clementroche commented on Apr 23, 2023

clementroche commented on Jun 14, 2023

emsitkowski commented on Jul 28, 2023

vonscriptor commented on Aug 30, 2023

ashthornton commented on Sep 13, 2023

clementroche commented on Nov 21, 2023

axherrm commented on Feb 12, 2024

iliketoplay commented on Mar 8, 2024

laroccaf commented on Apr 17, 2024

abdulfattahaud commented on Sep 24, 2024

vlrevolution commented on Sep 29, 2024

clementroche commented on Apr 3, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions