ScrollTrigger Safari Mobile Height Issue

[Joshua Harmon]

Hi,

 

I have a ScrollTrigger animation which works flawlessly except on browsers like Safari mobile where the browser height changes because of expanding UI elements.

 

I did some Googling couldn't really find anything that I haven't already tried.

 

My problem is when the URL bar shrinks I get a very visible white bar on the bottom of the screen.

 

Screen recording on iPad:

https://www.loom.com/share/b99c3ae0b6b0449aae06385559dcfab3

 

Codepen:

See the Pen vYeWWBQ by joshuah46 (@joshuah46) on CodePen

[OSUblake]

That's just Safari resizing the screen. Maybe you can try something of these tricks to get it fill 100% of the screen.

https://css-tricks.com/css-fix-for-100vh-in-mobile-webkit/

https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

 

The issue might also be related to Safari being slow...

 

 

And you can make the address bar stay fixed to prevent the browser from resizing.

 

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