ScrollSmoother on iOS mobile unexpectedly jumps to top of page on click/tap/touch

[hipstina]

Hello. I'm experiencing an issue with ScrollSmoother on mobile iOS devices (although I haven't tested on android). I am using the latest version of GSAP (3.10.4) and I seeing the issue pop up in Chrome, Safari, and Firefox browsers. 

 

The behavior: Clicking or tapping the screen anywhere on the page immediately jumps me to the top of the page (it takes a couple of taps). When I try to scroll back down to my initial position, the scroller jumps me back to my initial position. For elements like form fields that take input, this means that the focus is lost and their values get wiped. 

 

My temporary workaround for this has been to disable normalizeScroll for mobile,  but ideally I'd like to figure out a way to keep this turn on.

 

Here is a minimal demo (which I've forked from the GSAP ScrollSmoother + Next.js starter) : https://codesandbox.io/s/mobile-click-event-issue-zdw0er?file=/pages/_app.js:909-928. Please note that the only changes I made to the forked starter are:

• upgrading the version of GSAP to 3.10.4
• adding the smoothTouch: trueproperty to the ScrollSmoother.create config object.

 

Is there another way to configure ScrollSmoother on Next.js to avoid this kind of behavior?

 

Huge fan of GSAP and looking forward to digging in further

 

 

[GreenSock]

Hi @hipstina. I'm not familiar with Next.js, but if I understand what you're describing correctly, I believe that was already fixed in the next release of ScrollSmoother/ScrollTrigger which you can preview at: 

• ScrollTrigger: https://assets.codepen.io/16327/ScrollTrigger.min.js
• ScrollSmoother: https://assets.codepen.io/16327/ScrollSmoother.min.js (only works on CodePen/CodeSandbox/local)

You may need to clear your cache. 

 

Does that work any better for you? If not, it'll definitely help us troubleshoot more effectively (and quicker) if you can provide a simpler demo that doesn't use any framework (the simpler and more vanilla, the better)

[Harold AO]

👀