dkolb5 Posted April 14, 2022 Share Posted April 14, 2022 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 Link to comment Share on other sites More sharing options...
GreenSock Posted April 14, 2022 Share Posted April 14, 2022 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() Link to comment Share on other sites More sharing options...
dkolb5 Posted April 14, 2022 Author Share Posted April 14, 2022 Thank you for the suggestion Jack. It did help smooth Safari out a bit. Any estimate on when the safari issue might be resolved? Link to comment Share on other sites More sharing options...
GreenSock Posted April 14, 2022 Share Posted April 14, 2022 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)? Link to comment Share on other sites More sharing options...
dkolb5 Posted April 14, 2022 Author Share Posted April 14, 2022 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. Link to comment Share on other sites More sharing options...
GreenSock Posted April 14, 2022 Share Posted April 14, 2022 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. Link to comment Share on other sites More sharing options...
GreenSock Posted April 15, 2022 Share Posted April 15, 2022 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) Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now