[ScrollSmoother] Safari Rendering Issues

[noviedo]

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:

 

 
Chrome:

 

 
Thanks so much!

 

 

 

See the Pen NWXgqyK by GreenSock (@GreenSock) on CodePen.

[elegantseagulls]

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.

[noviedo]

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.

[Cassie]

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

 

 

 

[noviedo]

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.

[GreenSock]

For what it's worth...

1. 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. 
2. 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. ?
3. 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. 

[noviedo]

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

[GreenSock]

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!