Jump to content
GreenSock

Milk0

iOS Mobile problem - ScrollSmoother + pin large section glitching

Recommended Posts

Hello everyone! 
I'm working on a project where i had the chance to use ScrollSmoother combined with ScrollTrigger. 
On desktop everything works wonderfully and even on mobile but only if it is an Android one. 

Seems like that ScrollSmoother on iOS mobile devices makes the stuff in the pinned section "glitching" / moving up and down while scrolling on them.
I tried to apply normalize scroll and anticipate pin, and it got better but the glitch still remains. I assume is something i'm missing with scrollSmoother settings cause if i disable it on touch devices everything goes well.

From the demo you can test it out if you have an iPhone. You'll notice the glitch at all by scrolling slower in the middle(red) section. 
I'd like to understand if my settings are incorrect for scrollSmoother and pinning effect or if the right way to solve this is to completely disable the plugin on touch devices. 

Thanks in advance to everyone that will try to help! 



 

See the Pen poaJVdb by ElMilko (@ElMilko) on CodePen

Link to comment
Share on other sites

Try setting normalizeScroll: true on your ScrollSmoother's config object. 

 

There are known bugs in iOS Safari (the browser, not GSAP) that cause it to misreport scroll values intermittently (but VERY often, like on every other requestAnimationFrame while scrolling). Super annoying, right? Apple knows about it but hasn't fixed it. I believe it was reported years ago. Anyway, we put a ton of effort into the normalizeScroll feature to make it work around those browser issues.

Link to comment
Share on other sites

And you should also get rid of those nested ScrollTriggers. Check out the section about nesting ScrollTriggers here...

 

 

  • Like 2
Link to comment
Share on other sites

12 hours ago, GreenSock said:

Try setting normalizeScroll: true on your ScrollSmoother's config object. 

Thanks Jack @GreenSock but i've already done it on the demo because i read about iOS issues , and it improved the navigation a bit. But unfortunetly didn't solved the problem..
Other operations i may do?
 

12 hours ago, OSUblake said:

And you should also get rid of those nested ScrollTriggers. Check out the section about nesting ScrollTriggers here...

 @OSUblake i've created the demo fast and i didn't put the right attention on nesting, you right.

Tipically i do nest ScrollTrigger only if i want a specific item to start the animation in a different point of the viewport.. i hope that doesn't still a bad habit! 😂

  • Like 1
Link to comment
Share on other sites

42 minutes ago, Milk0 said:

Tipically i do nest ScrollTrigger only if i want a specific item to start the animation in a different point of the viewport.. i hope that doesn't still a bad habit! 😂

You certainly shouldn't ever nest ScrollTriggers - it's not just a bad habit that we advise against - it's not valid code. It will break your animations. Give that bit of the article a read!

  • Like 3
Link to comment
Share on other sites

7 hours ago, Cassie said:

You certainly shouldn't ever nest ScrollTriggers - it's not just a bad habit that we advise against - it's not valid code. It will break your animations. Give that bit of the article a read!

Ok very clear thank you @Cassie, i thought i could nest other ScrollTriggers targeting different elements and not the one that pins the whole thing.

Regarding the problem on iOS.. if someone has a way to fix it feel free to share, i can't find a way out from this at the moment


 

  • Like 1
Link to comment
Share on other sites

23 minutes ago, Milk0 said:

Regarding the problem on iOS.. if someone has a way to fix it feel free to share, i can't find a way out from this at the moment

 

We're looking into that. Can you confirm if the issue is still present if you don't create and the ScrollSmoother and just do ScrollTrigger.normalizeScroll?

 

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

ScrollTrigger.normalizeScroll(true);

 

Link to comment
Share on other sites

18 minutes ago, OSUblake said:

 

We're looking into that. Can you confirm if the issue is still present if you don't create and the ScrollSmoother and just do ScrollTrigger.normalizeScroll?

I can confirm that. Without ScrollSmoother it goes well. Tested on Safari and Chrome 
It also work well for me without the normalizeScroll too
 

Link to comment
Share on other sites

  • 1 month later...

Hi, I'm experiencing this same issue.

Is there any development on this, are we hopeful we'll see a fix in the near future?

Link to comment
Share on other sites

Hi @monolith. Have you tried the latest beta on CodePen (or CodeSandbox)? 

(You need BOTH, and you may need to clear your cache. These files are not for deployment, as they only work locally and on codepen/codesandbox). 

 

We're working hard to find a way around the iOS browser bugs. Literally spent hundreds of hours so far just on that. Sorry about the delay/hassle. Rest assured that we're not ignoring it. 

  • Like 1
Link to comment
Share on other sites

  • 3 weeks later...
On 5/5/2022 at 9:44 PM, Milk0 said:

I can confirm that. Without ScrollSmoother it goes well. Tested on Safari and Chrome 
It also work well for me without the normalizeScroll too
 

Also having this exact issue, works perfectly fine on other devices or if I don't use ScrollSmoother and ScrollTrigger together. Below is my configuration for ScrollSmoother and ScrollTrigger.
 

this.smoother = ScrollSmoother.create({
      smooth: 0.5,
      effects: true,
      normalizeScroll: false, //disabling this makes ScrollSmoother not bug out on Iphone
      ignoreMobileResize: true,
    });
 this.gsapTimeline = gsap.timeline({
        scrollTrigger: {
          trigger: "#about-container",
          pin: ".pin",
          start: "top top",
          endTrigger: ".intro",
          end: "top bottom",
          // markers: true,
          scrub: 1,
          anticipatePin: 1,
          invalidateOnRefresh: true,
          immediateRender: false,
        },
      });

 

Link to comment
Share on other sites

What version of GSAP are you using Koyash - and do you have a minimal demo?

Link to comment
Share on other sites

33 minutes ago, Cassie said:

What version of GSAP are you using Koyash - and do you have a minimal demo?

Hey @Cassie,

Thank you for the swift reply. I've created a minimal demo as requested.

See the Pen KKozoEK by Koyash (@Koyash) on CodePen



It works fine on most devices but the moment you try this on an iPhone it breaks. As for which version currently I am on the latest (3.10.4).
Apologies for the video quality, I had to lower the resolution quite a bit to upload it.  

Link to comment
Share on other sites

Ah ok! I think this is an occasion where normalizeScroll will come in handy.

normalizeScroll is basically our best effort at getting around some tricky IOS browser bugs.
 

with normalizeScroll - https://cdpn.io/pen/debug/poLyVKR
without - https://cdpn.io/pen/debug/KKozoEK?authentication_hash=DqADdGQpjneA

Let me know whether that helps?

  • Like 1
Link to comment
Share on other sites

23 hours ago, Cassie said:

Ah ok! I think this is an occasion where normalizeScroll will come in handy.

normalizeScroll is basically our best effort at getting around some tricky IOS browser bugs.
 

with normalizeScroll - https://cdpn.io/pen/debug/poLyVKR
without - https://cdpn.io/pen/debug/KKozoEK?authentication_hash=DqADdGQpjneA

Let me know whether that helps?

 

Enabling  normalizeScroll makes everything jitter on iphone without having ScrollTriggers on top of it, that's why I had it disabled. I tried your demo but it's still affected by the jitter. Sadly I cannot upload a longer video.

  • Like 1
Link to comment
Share on other sites

Ah, good to know thanks.

Can you check this link for me and let me know if the jitter is still there?

https://cdpn.io/pen/debug/poLyVKR

Your recording is in an iframe (codepen) which is possibly the issue.

  • Like 1
Link to comment
Share on other sites

57 minutes ago, Cassie said:

Ah, good to know thanks.

Can you check this link for me and let me know if the jitter is still there?

https://cdpn.io/pen/debug/poLyVKR

Your recording is in an iframe (codepen) which is possibly the issue.

 

Yep still jitters and occasionally skips to the end instantaneously, can't show a video anymore as I've reached the upload limit.

Link to comment
Share on other sites

Thanks for checking - what phone are you using?

Link to comment
Share on other sites

12 minutes ago, Cassie said:

Thanks for checking - what phone are you using?

Iphone 13 pro max with variable refresh rate ON.

  • Like 1
Link to comment
Share on other sites

We'll take a look into it! Sorry for the issues. IOS safari is a tricky one to wrangle. Thanks so much for letting us know.

  • Thanks 1
Link to comment
Share on other sites

  • 2 weeks later...

I found this topic because I was facing the same issue, and I managed to fix this by adding :
 

scroller: null

...on my ScrollTrigger pin instance, when I am on mobile.

So in my case (Vue project) I am using it like this to manage desktop (smooth-scrolling) / not desktop (no smooth-scrolling) :
 

scroller: this.$device.isDesktop ? '#smooth-wrapper' : null,

with this solution, i do not need to set normalizeScroll: true anywhere.

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

@Koyash can you please confirm that this still has problems even after you clear your cache?: 

https://cdpn.io/pen/debug/poLyVKR?cb=1

 

I can't reproduce any problem on my iPhone or iPad. 

  • Like 1
Link to comment
Share on other sites

1 hour ago, GreenSock said:

@Koyash can you please confirm that this still has problems even after you clear your cache?: 

https://cdpn.io/pen/debug/poLyVKR?cb=1

 

I can't reproduce any problem on my iPhone or iPad. 

Yes I am, and by clearing cache I'm assuming this is the correct way. settings -> safari -> clear history and website data. Then going to this link https://cdpn.io/pen/debug/poLyVKR . I'm on iOS 15.6 all default safari settings except my search bar is at the top. Again in this particular CodePen it happens mostly when drag scrolling. 

Link to comment
Share on other sites

I added some cache-busting to the URLs. Please retry and confirm that it doesn't work for you. I cannot seem to break it. 🤷‍♂️

 

https://cdpn.io/pen/debug/poLyVKR

  • Like 1
Link to comment
Share on other sites

@GreenSock sorry for the late response it's been a busy week, but to answer your question.

Yes, even after clearing cache and then going to the url you supplied (https://cdpn.io/pen/debug/poLyVKR) it continues to happen. I've tried on iPhone 7/x/11/13 and all have the same issue so I really don't know why you aren't able to reproduce this.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×