Jump to content
GreenSock

noviedo

[ScrollSmoother] Safari Rendering Issues

Go to solution Solved by GreenSock,

Recommended Posts

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

Link to comment
Share on other sites

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

Mmmm, is so weird, I tested in:
image.png.b86a4e3e00e4aa95c6287c5d8adafb8c.png
and in a:

 

image.png.6bcea3119c1294a8224dc7d96cdb9f59.png

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

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

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. 
  • Like 1
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

  • Solution

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!

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×