noviedo Posted April 13, 2022 Share Posted April 13, 2022 Hey guys! I just wanna show that we are having some rendering issues with ScrollSmoother in Safari browser, so I will leave here 2 videos to show the difference between Safari and Chrome. I would like to know if you have any workaround for that. Safari: Safari.mp4 Chrome: Chrome.mp4 Thanks so much! See the Pen NWXgqyK by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
elegantseagulls Posted April 13, 2022 Share Posted April 13, 2022 8 minutes ago, noviedo said: I just wanna show that we are having some rendering issues with ScrollSmoother in Safari browser Interesting, I just ran this demo in Safari (same version) and it's quite smooth for me (15in MBP). I can get a little extra performance (no weird pull-down effect at top and bottom of page) if I run normalizeScroll: true, but overall it's pretty solid for me. Link to comment Share on other sites More sharing options...
noviedo Posted April 13, 2022 Author Share Posted April 13, 2022 Mmmm, is so weird, I tested in: and in a: and in both mac's we have the same behavior. Also I tested using normalizeScroll: true but I continue having the same issue. Link to comment Share on other sites More sharing options...
Cassie Posted April 13, 2022 Share Posted April 13, 2022 Hey there! Thanks for flagging this, but the issue there is that the demo is in an iframe. Here's the same demo in debug mode https://cdpn.io/pen/debug/NWXgqyK - in safari Kapture 2022-04-13 at 20.57.00.mp4 2 Link to comment Share on other sites More sharing options...
noviedo Posted April 13, 2022 Author Share Posted April 13, 2022 Hey @Cassie, thanks so much, I will review my code, and I will try to do a minimal demo to show it because in my current project I'm having this issue, and isn't into an iframe, but let me debug a little more. Link to comment Share on other sites More sharing options...
GreenSock Posted April 15, 2022 Share Posted April 15, 2022 For what it's worth... I've had issues like that on My Mac intermittently and it affected ALL windows (totally unrelated to GSAP or even web pages). Like...when it starts doing that weird flickering thing, it's as if the Mac is out of sync with the monitor and I'll see the same jumping if I drag windows around or whatever. Only on my external monitor. Are you on Safari 15.4? Apple says they fixed a bunch of scroll-related bugs in the latest release. I can say for sure that there are/were a bunch of scroll-related bugs in Safari (I provide some links to 4 test cases at the bottom of the .normalizeScroll() page in the docs). For example, Safari will completely misreport scroll values intermittently, especially under heavy load (paint-wise). It also misreports event.clientX/Y values if you alter the scroll position on the same requestAnimationFrame tick. 🤕 Apparently Safari intentionally cuts the requestAnimationFrame() FPS in half in iframes that are loaded from a different domain UNTIL the user interacts with it (clicks). Yeah, super annoying. Thanks Apple! Does your site work better once you click on it? Just curious. 1 Link to comment Share on other sites More sharing options...
noviedo Posted April 15, 2022 Author Share Posted April 15, 2022 Hey Jack!, thanks so much for your comments! Fortunately, I found was my bug(?), I'm using a video with a wrapper with an ::after layer with a filter: blur() and this apparently doesn't like to safari haha, if I comment on this line, the scroll works perfectly. I leave here the GreenSock demo implementation (with some images replaced by videos) on Next.js, and I did the test, so I leave a commented line with the blur() (just for you can test it). https://codesandbox.io/s/gsap-next-smoothscroll-jg1zin 1 Link to comment Share on other sites More sharing options...
Solution GreenSock Posted April 15, 2022 Solution Share Posted April 15, 2022 Ah yes, Safari is terrible performance-wise with filters but you can set will-change: filter (or maybe just will-change: transform would do it to) and it can make a huge difference. Glad you got it figured out! 1 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