Performance differences between Chrome and Safari

[jbarkun]

Hello again,

Are there known performance issues in Safari compared to Google Chrome? I have the basic demo open in both browsers, and while Chrome is buttery-smooth, Safari is noticeably slower/shakier. On the demo it isn't that big of an issue, but on pages with more going on, and while scrolling through sections with animations added on (through GSAP ScrollTrigger or similar), the shakiness is much more pronounced.

[ashthornton]

Hi @jbarkun, it's been a while since I've done some serious performance testing in Safari as I don't have easy access to a Mac at the moment. But could you check the performance in these GSAP ScrollTrigger demos from other popular smooth scroll libraries and see if there's any difference?

https://codepen.io/GreenSock/pen/1dc38ca14811bc76e25c4b8c686b653d
https://codepen.io/GreenSock/pen/oNLqgBm

[JonQuayle]

Just chiming in here as I'm also experiencing a significant degrade in performance on Safari compared to Chrome and Firefox. Chrome is far and away the smoother experience, followed by Firefox which is smooth but seems slower to scroll through a page. Safari is a very jarring experience - I will admit I haven't been able to upgrade my machine to the latest OS (could be a factor) but it would be good to have comparable performance across the board if/when that is a possibiltiy. The demos above seem to work pretty much the same across those three browsers from my experience. Having said that, you've done a great job so far :), and I love the fact your library works across mobile with its own scroll speed settings.

[ashthornton]

Thanks @JonQuayle I will take a proper look into why it's struggling so much in Safari when I get the chance.

[jbarkun]

Hi @ashthornton, thanks for looking into this. I looked at the links you provided in both Chrome and Safari, along with ASScroll's GSAP demo again. There was a certain degree of sluggishness present in all three demos, but like @JonQuayle noted, it wasn't all that visible in locomotive or smooth-scroller and probably wouldn't have been noticed at all without a side-by-side comparison in Chrome. ASScroll's demo on the other hand, was noticeably slower to respond.

I also haven't updated my machine to the latest OS yet; it isn't compatible with some critical programs right now. So that may be a factor if Safari has gotten better about transforms in the latest update. I'll see if I can nab someone with an updated OS to test for us.

[jbarkun]

I've talked with a colleague with the most recent update of Safari, and they confirmed that the issues are still present regardless of the update.

[ashthornton]

Thanks for confirming @jbarkun

[ashthornton]

I now have access to a 2014 Macbook Pro and I've been testing to try and replicate the Safari performance issues mentioned here, but I'm unable to see any major drops in framerate when viewing ASScroll-based projects. There are some minor frame drops occasionally, but for the most part it matches the performance of Chrome.

Can you provide an example that gives you issues?

[JonQuayle]

Feel free to check out my site for the issue I was seeing - https://www.jonquayle.co.uk. Still in the process of a bit of a redesign but I left it live. It is buttery smooth in Chrome by comparison. Thanks @ashthornton.

[ashthornton]

@JonQuayle in your case, it seems that ASScroll may not be the bottleneck of your site when it comes to performance. It looks like some of the most expensive operations come from a script called 'midnight.jquery.min.js'. It's doing a lot of calculations that cause layout thrashing and reflow, so this isn't going to help. It seems that this script is also requesting an additional animation frame on top of the one from ASScroll.

I noticed you're also using GSAP which uses it's own internal RAF loop. For starters I'd suggest merging these into one loop, which should give a noticeable performance boost. Some detail on that can be found here in the docs

If you don't see a decent improvement after dealing with these issues, I'd be interested to see how one of the other popular smooth scroll libraries performs in place of ASScroll on your site.

[JonQuayle]

@ashthornton Ah I see, thanks for pointing me in the right direction. I'll give this a go and see how it gets on, thanks.

[josueadelima]

Hello I'm using a 2015 MacBook Pro with macOS Big Sur 11.4 and Safari Versión 14.1.1 (16611.2.7.1.4); I don't see mayor differences with Chrome 91.0.4472.77 (Build oficial) (x86_64) usigin this demo https://codepen.io/GreenSock/pen/rNyyxBP