ScrollTrigger.normalizeScroll() doesn't work on some ios devices

[kwastaras]

Hi! ScrollTrigger.normalizeScroll() doesn't work on some ios devices, on some new iphones (iphone 12) it worked but caused 'jumpinness' when scrolling, on older ones (iPhone 7, XS) it broke my page, is there some rule of how to better apply it?

 

Thank you very much for your work!

[GreenSock]

Hi @kwastaras. It's pretty tough to diagnose blind - got a minimal demo we could peek at (like a CodePen, Stackblitz, or CodeSandbox)? And what exactly do you mean by "broke my page"? 

[kwastaras]

Hello @GreenSock ! the page is just too big; I can't create a minimal demo. What I'm interested in is whether ScrollTrigger.normalizeScroll() should work 100% on all iOS devices with a bottom toolbar? If the bottom iOS toolbar breaks all triggered points, what alternative approach to animation can I try instead? ( Right now, due to the bottom toolbar, my pinSpacer's 'top' attribute is changing on scroll up and down, causing the fixed elements to be repositioned slightly. )

[GreenSock]

ScrollTrigger will automatically .refresh() whenever the viewport resizes so that the start/end positions get recalculated. When the address bar shows/hides, that changes the viewport size. If you want ScrollTrigger to ignore those resizes from the address bar, you can do this: 

ScrollTrigger.config({ ignoreMobileResize: true });

Does that help? 

[Evil]

On 4/10/2023 at 4:53 AM, kwastaras said:

my situation is the same to you，anyone know this?

 

On 4/11/2023 at 5:27 AM, kwastaras said:

Hello @GreenSock ! the page is just too big; I can't create a minimal demo. What I'm interested in is whether ScrollTrigger.normalizeScroll() should work 100% on all iOS devices with a bottom toolbar? If the bottom iOS toolbar breaks all triggered points, what alternative approach to animation can I try instead? ( Right now, due to the bottom toolbar, my pinSpacer's 'top' attribute is changing on scroll up and down, causing the fixed elements to be repositioned slightly. )

 

[Rodrigo]

Hi @Evil,

 

Unfortunately there are a few bugs and quirks related to iOS devices that have been around for many years now without any solution.

 

Here's just a sampling of the various unresolved bugs we encountered in Safari which was by far the most problematic browser (mostly on mobile):

See the Pen 087cef197dc35445a0951e8935c41503 by GreenSock (@GreenSock) on CodePen

 

See the Pen 3dd65ccec5a60f1d862c355d84d14562 by GreenSock (@GreenSock) on CodePen

 

See the Pen 16c435b12ef09c38125204818e7b45fc by GreenSock (@GreenSock) on CodePen

 

See the Pen c0402caac3044c3f5bb85022450b059b by GreenSock (@GreenSock) on CodePen

 

See the Pen VwxxwWm?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Some were reported back in January 2018 and still haven't been fixed. We tried reaching out to the Safari team directly on many occasions, but they were unresponsive. If anyone knows a way to reach them, please let us know; we'd love to collaborate on workarounds. We sunk hundreds of hours into troubleshooting and normalizeScroll() represents our best crack at working around the various browser bugs and inconsistencies. We welcome suggestions.

 

Unfortunately this is the current state of affairs with some issues on iOS, I can guarantee that we would love to be able to solve all of these.

 

Finally if you could provide a minimal demo that shows the issue you're having as well as the iOS version and device you're having issues with, it'd be very helpful.

 

Happy Tweening!

[GreenSock]

9 hours ago, Evil said:

( Right now, due to the bottom toolbar, my pinSpacer's 'top' attribute is changing on scroll up and down, causing the fixed elements to be repositioned slightly. )

Some other things to try: 

• Update to the latest version of GSAP/ScrollTrigger
• Add this: 

  ScrollTrigger.config({ ignoreMobileResize: true });