Scroll triggered scroll to top - issues on mobile browsers

[BrianCross]

Hi folks! I hope everyone is doing well. 
 

I’ve got a problem with this animation that only seems to be a issue on mobile. It works perfectly on desktop. I’ve tested it on iOS Safari, but I don’t have an Android device to try so I’m not sure if the issue exists on that platform. 

The problem is when you scroll to the bottom and then back up a bit, a scroll to top animation is triggered. On desktop it scrolls up smoothly but on mobile it’s very broken. 
 

Any advice on this one?

 

 Thanks in advance!

 

Brian

 

See the Pen c7a6fd38d2b448b50da8cd2027d6169c by BrianCross (@BrianCross) on CodePen

[BrianCross]

Ok... the embedded CodePen seems to work fine. On the CodePen site it’s exhibiting the behaviour. It’s flaky on a site I’m building. Is there anything in this code that I’m doing incorrectly?

 

Edit: it seems to be intermittent. Refreshing the page causes it to happen sometimes and sometimes it works fine. Strange. 

[GreenSock]

Hm, I couldn't get it to break, but I wonder if it just has to do with the fact that ScrollToPlugin will automatically kill the scroll animation if it senses that the user (or anything else) altered the scroll position. It's to avoid a frustrating experience where a user tries to scroll during that animation and can't. But you can set autoKill: false if you prefer:

scrollTo: {y: 0, autoKill: false},

Does that help at all? 

[BrianCross]

Let’s see if this works. I grabbed a screen recording of it. I tried disabling autoKill but I was still able to break it. It’s probably Safari’s fault. If anything is going to have problems it seems to always happen in that browser. 

[GreenSock]

I do see what you mean (thanks for the video) - it seems like iOS Safari is applying touch momentum and continuously setting the scroll position according to your original touch/flick WHILE the plugin is also doing its scroll animation which is bizarre. And the native touch scrolling is being applied in a SEPARATE thread, thus it's not synchronized with the JS thread where GSAP is doing its magic (hence the flickering). Clearly an issue with Safari, but I'm not entirely sure how to circumvent it yet. I'll ponder it. If you've got any suggestions, I'm all ears. A while back, there was a CSS property that could cause iOS Safari to stop doing its momentum scroll, but then Apple simply ignores that property now and forces the momentum scroll (thanks Apple!) 🙄