Page has issues on IOS devices because of bottom toolbar

[kwastaras]

Hi, I did a page with scrolltrigger pinning and other effects, but on iphones it isn't working well because of bottom toolbar, that moves bottom 'scrolltrigger' and my '.pinSpacer' got repositioned... I tried ScrollTrigger.normalizeScroll() but it doesn't seem to work. We are looking for a person that can troubleshoot it

 

Thanks for your time

[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? 

[kwastaras]

Hi Jack! It resolved the part of the problem, thank you... Can I detect on window load somehow, the window.innerHeight incluging the moving bottom toolbar? (it's visible on load)

[GreenSock]

I'm a bit confused - if you refresh() at a different height, then of course the start/end values will get recalculated and it could cause a jump which is exactly what ignoreMobileResize is avoiding. It kinda sounds like you're asking "how do I skip the refresh...and also do the refresh?" 

 

You'll definitely have a much better chance of getting a good answer if you provide a minimal demo. Don't include your project - just the simplest possible demo you can create (a CodePen, Stackblitz, or CodeSandbox). 

[kwastaras]

@GreenSock sorry for that, I understood now that I wanted to do literally the same. I've edited my message. Just on load, when bottom toolbar is visible, the window.innerHeight is smaller and initial scrollTriggers are calculated based on that smaller height, and I want to somehow calculate them as if toolbar is already hidden ( highest possible innerHeight on load)

[GreenSock]

ScrollTrigger measures things according to the actual layout, not a fictitious value. So in order to do what you're asking, you'd need to make your page layout render as if there's no address bar which entails setting up your CSS accordingly. I think there's some kind of new viewport unit that may give you to maximum viewport height available (excludes address bar), but I don't have time to research that for you. 

 

Either that or you'd have to find a way in JavaScript to force the address bar to hide so that you can then do a .refresh() at that point, and then restore the address bar after setting ignoreMobileResize: true. I kinda doubt that's possible. 

[kwastaras]

@GreenSock thank you very much for the ideas and help!