Comments (11)
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
from asscroll.
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.
from asscroll.
Thanks @JonQuayle I will take a proper look into why it's struggling so much in Safari when I get the chance.
from asscroll.
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.
from asscroll.
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.
from asscroll.
Thanks for confirming @jbarkun
from asscroll.
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?
from asscroll.
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.
from asscroll.
@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.
from asscroll.
@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.
from asscroll.
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
from asscroll.
Related Issues (20)
- Fix auto-inversion of target position when using .scrollTo on touch devices
- Add a jumpTo type method HOT 1
- Scroll jumps up when enabling
- Scroll jumps back to initial start position on Nuxt? HOT 1
- Works in Codepen only HOT 1
- Jumps farther than expected in firefox HOT 2
- Is it possible to have tabindex inputs and buttons work with AsScroll? HOT 2
- Is it possible to disable AsScroll? HOT 1
- How to know when an element scrolls into view? HOT 2
- Window jumps to top when using a form in Safari v15.4 HOT 2
- Does not scroll while mouse is over iframe. HOT 4
- How to properly remove event listener on window.object? HOT 3
- Asscroll not working with scrolltrigger which consist horizontal scroll HOT 1
- Position fixed seems to kill performances on safari HOT 1
- Position Fixed Problems HOT 1
- Tab focus not working for horizontal scroll
- Not working with Next.js HOT 1
- After a few seconds, couldn't scrolling with nextjs HOT 5
- Unable to scroll on div with absolute
- ASScroll is not working correctly on Mobile
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from asscroll.