the tiresome topic: iOS, pinned Element, ScrollSmoother & jitter

[F.D.C.H]

Hello everyone,
its been a while since my last post and although i've read multiple threads dealing with iOS and ScrollTrigger/Smoother in the past, i haven't found the answer i'm looking for.

The basic issue is on the beloved iOS devices, i use an iPhone 13, the pinned element is jittering only if ScrollSmoother is created.
So i have only the issues with scrollSmoother and only with pinning.
I've always read, that ScrollSmoother automatically disables smoothing on touch devices by default, but still something is interferencing.
When removing the ScrollSmoother Init code, the pining works flawless - I added a simple Codepen Demo.
Why does it behave like this?

i know about normalizeScroll, but I don't like the sporadically unnatural scrollfeeling and the last 80px of the Page remains always under the bottom adressbar.
I also know, that i could only add ScrollSmoother on non-touch devices, but this would be my Plan C.
Plan B would be to get rid of all pinned elements, since i like the ScrollSmoother parallax effects more.

As always, thank you for the excellent work with every gsap-update and the flawless forum-help.
Fabio

See the Pen ZEmaddB by F-D-C-H (@F-D-C-H) on CodePen

[Rodrigo]

Hi Fabio,

 

Unfortunately this is beyond our grasp and normalize scroll represents the best possible solution to the vast majority of these issues. If you choose to not use normalizeScroll, then basically you'll have to invest time into creating such solution.

 

One thing you could do is use a combination of GSAP MatchMedia and ScrollTrigger isTouch in order to create or not the ScrollSmoother instance:

https://greensock.com/docs/v3/GSAP/gsap.matchMedia()

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.isTouch

 

Other than that I don't know any other approach to solving this.

 

Happy Tweening!

[F.D.C.H]

Hey Redrigo
thanks for the quick reply.
I know about some workarounds, this was more a topic of willing to understand why the ScrollSmoother Instance affects the pinned element although ScrollSmoother doesnt adds smoothing on touch devices by default.
Therefore ScrollSmoother is adding something else, and i wanted to know what this "else" is and why it is added 😁
But than i will go with my plan B and ger rid of all pinned elements.
Thank you very much for all your great job
Best wishes
Fabio