Smooth Scroller - Safari

[dkolb5]

Hey, All. First off smooth scroller is amazing! An awesome addition to the gsap plugins. Second while testing it out I ran into some performance issues on Mac Safari. It appears jittery and shakey on scroll. Is this due to something I'm doing wrong? Or a compatibility issue with Safari?

 

Here are the codepens I and a A screen recording (chrome on the left and safari on the right).

 

Smooth Scroller On/Off

See the Pen MWrPEEN by bws_dan (@bws_dan) on CodePen

 

 

See the Pen abERWpv by bws_dan (@bws_dan) on CodePen

[GreenSock]

We're investigating that, but in the meantime have you tried the new normalizeScroll(true) feature? 

ScrollTrigger.normalizeScroll(true);

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll()

[dkolb5]

Thank you for the suggestion Jack. It did help smooth Safari out a bit. Any estimate on when the safari issue might be resolved?  

[GreenSock]

9 minutes ago, dkolb5 said:

Thank you for the suggestion Jack. It did help smooth Safari out a bit. Any estimate on when the safari issue might be resolved?  

Sorry, I cannot provide that but rest assured we're working on it. We've spent months, mostly wrestling with Safari because it is TERRIBLE. It has glaring bugs from 2017 still present. We've reached out to their team directly and they've been largely unresponsive. So we're doing our best but it takes time to figure out workarounds. It is a priority for us, though. I wish I could just say "oh, we'll find a workaround by tomorrow at noon and then have it merged into the official codebase and deployed by evening"

 

What's weird is that your CodePen demo seems to only show the problem when it's in an iframe on CodePen. I cannot replicate it locally. Even in an iframe locally it's not behaving the same. 🤷‍♂️ Are you seeing it in a standard site (not in an iframe)? 

[dkolb5]

No worries Jack. I figured I'd try. And I have heard of Apple developers not being super responsive unfortunately. 

 

I know between me and one of my coworkers he didn't see the jitteryness. I am on an Intel Mac and I can't recall if he has an M1 or not. But certainly odd it would change per similar setup. Maybe it has something to do with how they handle the processing of their browser on either CPU.  

[GreenSock]

Yeah, I think part of the problem might be that Safari will throttle the requestAnimationFrame() calls to half of what they should be when it's in an iframe that's loaded from a different domain UNTIL the user interacts/clicks in that iframe. Makes a big difference visually. 

[GreenSock]

One other thing that'd almost surely solve it is if you use ScrollSmoother (it's a membership benefit of Club GreenSock). That handles scroll in a totally different way, eliminating the thread syncing issues by doing all the movement via JS while still leveraging native scroll as the "source of truth". Have you tried using ScrollSmoother yet? You can try it for free on CodePen [only] with this URL: https://assets.codepen.io/16327/ScrollSmoother.min.js (don't deploy that elsewhere or it'll redirect)