iOS Mobile problem - ScrollSmoother + pin large section glitching

[call007]

37 minutes ago, Koyash said:

@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.

I have the same problem with IPad Pro (12.9-inch) (5th generation) (iOS 15.6). I can try to record a video if you wish.

[GreenSock]

10 hours ago, Koyash said:

I really don't know why you aren't able to reproduce this.

Me neither! So frustrating. I've tried my iPhone and iPad. ZERO problems. No jittering. None. Updated to the latest OS. Still no problems. It just seems like maybe you're loading the old ScrollTrigger file somehow, but you cleared your cache so I guess not. I'm officially perplexed. And yes, a video would be awesome, especially if you could show the ScrollTrigger version proof. I just updated the demo to display the version number on the initial screen. Are you seeing 3.11.0?

[Mendieta]

I have stumbled across the same error, @GreenSock or @Cassie how can i install version 3.11.0 with shockingly green npm? i guess its beta. maybe

I can confirm that on the codepen link you folks sent the jittering doesnt happen on iphone 13 iOS 15.5

[GreenSock]

3 hours ago, Mendieta said:

I have stumbled across the same error, @GreenSock or @Cassie how can i install version 3.11.0 with shockingly green npm? i guess its beta.

I sent you access details via DM. 

 

3 hours ago, Mendieta said:

I can confirm that on the codepen link you folks sent the jittering doesnt happen on iphone 13 iOS 15.5

So strange, right? I cannot reproduce it either no matter how hard I try. I wonder what's different on our devices? I haven't changed any significant  settings at all. 🤷‍♂️

[Mendieta]

@here for everyone, i ran my project with the 3.11.0 version and the jittering of the pinning is gone!

But it has other issues, the markers jitter (jump some pixels when scrolling), im using this config for ScrollSmoother:

 

ScrollSmoother.create({
  smooth: 1.2,
  effects: true,
  ignoreMobileResize: true,
  normalizeScroll: true,
});

[Mendieta]

After testing a bit more, if i remove ScrollSmoother on iOS all my scrolltriggers work almost perfectly, ive tried ScrollSmoother with ignoreMobileResize, normalizeScroll and smoothTouch(0.1) with all the combinations i could came up, and sadly without ScrollSmoother the scrolling is way smoother.

[Koyash]

23 minutes ago, Mendieta said:

if i remove ScrollSmoother on iOS all my scrolltriggers work almost perfectly

That's the whole issue.  ScrollSmoother breaks all ScrollTrigger animations on iOS, without ScrollSmoother it just works. I've tried a lot of things just like you and cannot find a solution except dropping ScrollSmoother all together. 

 

As for the solution you suggested:

49 minutes ago, Mendieta said:

ScrollSmoother.create({ smooth: 1.2, effects: true, ignoreMobileResize: true, normalizeScroll: true, });

It's already being used in the CodePen demo together with v 3.11.0 and did nothing to resolve it (for me), thanks for the suggestion but I think in this case it's out of our control.

[GreenSock]

1 hour ago, Mendieta said:

But it has other issues, the markers jitter (jump some pixels when scrolling), im using this config for ScrollSmoother:

Yes, the advanced smoothing tactic we're applying to the content is not applied to the markers because that'd be wasteful in terms of CPU/kb (those are only there to sorta help during development and would never be enabled on a deployed site). 

 

To be clear, this advanced smoothing tactic is only used on iOS devices to work around several glaring bugs in iOS Safari itself (it misreports positioning while scrolling) and it involves applying/removing a translation on every-other render. 

 

1 hour ago, Mendieta said:

sadly without ScrollSmoother the scrolling is way smoother.

Just to verify - did you set smoothTouch: false and ALSO gsap.set(smoother.content(), {clearProps: "transform"}) to get rid of the transform and set ScrollTrigger.normalizeScroll(false)? Was that any better?

 

Sorry, folks, I've quite literally burned many hundreds of hours trying to work around these glaring iOS Safari bugs (and reported them to the Safari team but they have been largely silent) - I really wish I could find a clean way around them. I've definitely implemented strategies that smooth over them in various scenarios but apparently not all of them. I still cannot replicate the jitter you're reporting. Not on any of my devices.

[neilcline]

just hopping in the thread to +1
I also experience this jittering of a pinned element while using ScrollSmoother in Chrome, as well as Safari, on my iPhone XS Max

[Mendieta]

@GreenSock i tried appplying

Quote

Just to verify - did you set smoothTouch: false and ALSO gsap.set(smoother.content(), {clearProps: "transform"}) to get rid of the transform and set ScrollTrigger.normalizeScroll(false)? Was that any better?

 

and it was indeed better, still the scrolltrigger animations and pinning is better just removing completely ScrollSmoother. I dont think is that much of an issue. Since with those settings we are essentially removing smoothscrolling on mobile devices. The only things lost would be the update of scroll and ability to lock scroll (which are pretty neat) but implementing those with vanilla js is quite simple. And the obvious normalizeScroll (which is also super neat!)

I do believe v3.11.0 is way more optimized for iOS browsers, but for now i think ill stick to no smoothscrolling on iOS, scrolltrigger by itself works like a charm.

Its a shame the Safari team has not been helpful, specially with such a highly used browser.

 

thanks 

[Koyash]

2 hours ago, GreenSock said:

glaring iOS Safari bugs (and reported them to the Safari team but they have been largely silent)

Actually it's not only Safari.

 

1 hour ago, neilcline said:

jittering of a pinned element while using ScrollSmoother in Chrome, as well as Safari, on my iPhone XS Max

On 7/28/2022 at 11:48 AM, call007 said:

same problem with IPad Pro (12.9-inch) (5th generation) (iOS 15.6).

I also experience this on Firefox but not Chrome like @neilcline mentioned. I've tested this on multiple iPhones ranging from 7 to 13 pro max and @call007 also reported this issue on iPads.

 

So I think this is something bigger than just a Safari bug i.e. the way iOS/iPadOS devices interact with different web browsers.

 

In my case Safari itself is the worst offender of them all. It's rare to trigger the jitter on Firefox.

[GreenSock]

55 minutes ago, Koyash said:

Actually it's not only Safari.

Like Cassie said earlier, ALL browsers in iOS use Safari - it's forced by Apple. The other browsers are just wrappers around Safari's core renderer. 😕

[Koyash]

10 minutes ago, GreenSock said:

Like Cassie said earlier, ALL browsers in iOS use Safari - it's forced by Apple. The other browsers are just wrappers around Safari's core renderer. 😕

 

Learned something new! But how does this explain me not getting the jitter on the Chrome app? I'm so perplexed by this... 

[GreenSock]

4 hours ago, Koyash said:

But how does this explain me not getting the jitter on the Chrome app? I'm so perplexed by this... 

Welcome to the club

 

Many things don't make sense in iOS land. 🤷‍♂️

[merlin]

@GreenSockHey Jack! Any updates on this?  
I'm experiencing the same on Chrome:

 

[coderesolution]

Hey all,

 

I'm afraid we're also having the same issues.

 

macOS, Android and Windows are all fine.

 

However, on iOS (Safari, Firefox and Chrome) on various models and versions, we have the same jittering problem whilst scroll (quick preview video: https://cloud.coderesolution.com/ursjkV).

 

We've been able to replicate it on physical devices and BrowserStack, though oddly not on LambdaTest.

 

We're using GSAP v3.10.4.

 

We would love to get help on this, thank you!

 

UPDATE:

 

Changing `smoothTouch` to `0` has fixed it. Since touch devices have native smooth scrolling, I don't think this is bad.

 

Edited August 18, 2022 by coderesolution
Solution

[merlin]

@coderesolution Some things in our thread may help!

[Koyash]

I just updated to 3.11 and for me it's completely fixed on all browser apps (iPhone 13 pro max). 

[GreenSock]

🎉💚

[Cassie]

glorious news!

[Basilico]

I tried the demo provided here: https://cdpn.io/pen/debug/poLyVKR on an iPhone 6s and I found that the problem happens only when the battery is in "Low power mode".

 

Anyone else? 

[Koyash]

35 minutes ago, Basilico said:

I tried the demo provided here: https://cdpn.io/pen/debug/poLyVKR on an iPhone 6s and I found that the problem happens only when the battery is in "Low power mode".

 

Anyone else? 

WOW! You're right. I was also able to reproduce this issue with low power mode on (iOS 16.1). Turning low power mode off immediately fixes it so I wouldn't worry too much about this. Good find though!

 

@GreenSock We've returned once again 😅.

[Basilico]

31 minutes ago, Koyash said:

so I wouldn't worry too much about this

Well.. it depends. If the website is heavily based on scrolltrigger it looks like a broken thing.

Anyway, probably the reason because the testing was so difficult to debug was due to the battery mode.

[GreenSock]

Yeah, Safari is absolutely terrible especially when it comes to scroll - an Apple engineer confirmed that it's literally impossible to get Safari to be synchronized scroll-wise. It misreports scroll position, misreports event.clientY/X, etc.  There are at least 5 blatant scroll-related bugs in the browser itself, most of which are impossible to work around.  

 

Have you tried using ScrollTriggers' normalizeScroll feature?: 

ScrollTrigger.normalizeScroll(true);

Does that improve things for you at all? We spent many hundreds of hours on that feature alone for iOS and it does indeed work around several of the browser bugs. It's not a silver bullet, though.

 

Sorry - we've tried so hard to work with Apple, find workarounds, and the Apple team just seems uninterested in doing much at all (at least in the past year that we've been actively trying to get their attention).

[Basilico]

16 hours ago, GreenSock said:

Have you tried using ScrollTriggers' normalizeScroll feature?
Does that improve things for you at all?

Based on my tests, the normalizeScroll is a problem with Low power mode and it makes it very laggy.

 

I'm developing a project based on scrollTriggers and for the moment I'm going to avoid that feature because "normal" scrollTriggers are working fine.
Obviously I'm not going to use ScrollSmoother on mobile too.

 

Thanks for the great effort you put in this library. GSAP is so useful and well done that is a shame the Safari team keeps ignoring these bugs.