Issue with ScrollSmoother | iOS | safari - chrome - maybe others

[Harold AO 6 Likes (Newbie)]

 

 

Hello Greensock. 

I had a weird issue with ScrollSmoother on my iPhone 12 (I tested on Safari and Chome) — c.f Video 1 (IMG_2495.MOV)

So I tried to active ScrollSmoother on mobile with smoothTouch : (whatever)

The issue was gone but a new one popped up (when we click/touch/tap the screen we are redirected to the top of the page) — c.f Video 2 (IMG_2496.MOV)

 

So my last solution was to wrap everything related to ScrollSmoother into a if statement : if !/Android|webOS|iPhone………../i.test(navigator.userAgent)

 

FYI: I also tested the 2 first issues on BrowserStack and there were no issues. 

[Cassie 5,658 Likes (Superhero)]

Hey there! We can usually help more effectively if you provide a minimal demo, codepen is great for this.

 

[Harold AO 6 Likes (Newbie)]

6 minutes ago, Cassie said:

Hey there! We can usually help more effectively if you provide a minimal demo, codepen is great for this.

 

Unfortunately it's a Shopify store. But here is the link (JS is not minified / compiled) https://j0qaqmjgr0ycbfrc-40246673574.shopifypreview.com

[Cassie 5,658 Likes (Superhero)]

Are you using the latest version of GSAP?
 

 

[Harold AO 6 Likes (Newbie)]

2 hours ago, Cassie said:

Are you using the latest version of GSAP?
 

 

ScrollSmoother 3.10.4

Gsap 3.10.3

ScrollTrigger 3.10.4

[OSUblake 18,538 Likes (Superhero)]

We're looking it.

 

[GreenSock 18,886 Likes (Superhero)]

I believe this is fixed in the next release which you can preview at:

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

You may need to clear your cache. 

[Harold AO 6 Likes (Newbie)]

13 hours ago, GreenSock said:

I believe this is fixed in the next release which you can preview at:

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

You may need to clear your cache. 

Am I missing something ? (I'm still at 3.10.4)👀

[GreenSock 18,886 Likes (Superhero)]

That's correct - the preview files I talked about above are NOT in the official downloads yet because they're not released yet. Those files are a work-in-progress. 

[Harold AO 6 Likes (Newbie)]

26 minutes ago, GreenSock said:

That's correct - the preview files I talked about above are NOT in the official downloads yet because they're not released yet. Those files are a work-in-progress. 

Got it ! Thanks for the update !

[Diego Gnoatto 5 Likes (Newbie)]

i got the same issue on ios, any solution on this while we wait the release of 

ScrollSmoother 3.11.0 ?

[Diego Gnoatto 5 Likes (Newbie)]

Just now, Diego Gnoatto said:

i got the same issue on ios, any solution on this while we wait the release of 

ScrollSmoother 3.11.0 ?

#ihatesafari

[GreenSock 18,886 Likes (Superhero)]

2 hours ago, Diego Gnoatto said:

i got the same issue on ios, any solution on this while we wait the release of 

ScrollSmoother 3.11.0 ?

@Diego Gnoatto I sent you the beta files - you're welcome to use those for now. Please let us know if it resolves things for you or if you notice anything else that looks odd. We're prepping the launch, so hopefully it won't be terribly much longer. Thanks for everyone's patience. 

[AllenIVe 1 Likes (Newbie)]

Hello i have the same issue on saithia.oneupstudio.it 

 

ScrollTrigger 3.12.2

ScrollSmoother 3.12.2

 

all the animations are busted, testing from browser mobile mode it works perfectly. On devices  both safari and chrome everything is broken, jump, the pinned sections are random

 

 

[call007 6 Likes (Newbie)]

2 hours ago, AllenIVe said:

Hello i have the same issue on saithia.oneupstudio.it 

 

ScrollTrigger 3.12.2

ScrollSmoother 3.12.2

 

all the animations are busted, testing from browser mobile mode it works perfectly. On devices  both safari and chrome everything is broken, jump, the pinned sections are random

 

 

Hi! I solved this problem this way:

let smoother: ScrollSmoother;

if (!ScrollTrigger.isTouch) {
  smoother = ScrollSmoother.create({
    smooth: 1,
    effects: true,
  });
}

I'm just turning off ScrollSmoother for the touch devices.

My example is http://html5-coder.ru/html/project-225/index.html

[Rodrigo 5,908 Likes (Superhero)]

Hi @AllenIVe,

 

Sorry to hear about the troubles. We can't really debug live sites, the best we can do in those cases is just give you some suggestions. If possible create a minimal demo that clearly illustrates the problems you're having.

 

That being said, iOS has been a source of issues as stated in the ScrollTrigger docs (scroll to the end):

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll()

 

You can try using normalizeScroll at the to of your file:

ScrollTrigger.normalizeScroll(true);

Or add it to the ScrollSmoother config as well:

smoother = ScrollSmoother.create({
  smooth: 1,
  effects: true,
  normalizeScroll: true,
});

Another alternative could be to use the approach given by @call007 (thanks for sharing! 🥳) for using normalizeScroll on touch devices only (it could feel a bit weird in regular desktop/laptops but that shouldn't be noticeable because of ScrollSmoother.

 

Hopefully this helps.

Happy Tweening!

[GreenSock 18,886 Likes (Superhero)]

8 hours ago, AllenIVe said:

all the animations are busted, testing from browser mobile mode it works perfectly. On devices  both safari and chrome everything is broken, jump, the pinned sections are random

That sounds like something else is problematic in your code. It's impossible to say without a minimal demo and more specifics (what does "everything is broken" mean? and what jumps? and what do you mean that pinned sections are "random"?), but iOS Safari itself has several bugs and Apple has confirmed that it's literally impossible to have the scrolling thread synchronized with the main JavaScript thread which is why normalizeScroll() can be so helpful. I'm not aware of any bugs that would cause the behavior you described but then again, I'm not sure I accurately understand what you're describing. If you still need some help, please provide a minimal demo with as little code as possible (don't include your whole project) and we'd be happy to take a peek.