ScrollTrigger with hiding browser interface on mobile

[Roman Baranov 2 Likes (Newbie)]

Hello everyone, have a little problem, when you are scrolling first screen on mobile, browser hide interface, and it's a resize, so while you are scrolling, animation OK, but when you are stop - animation recalculate without any transition. I know it's not a bug, it's a expected behaviour, but what I can do with it?

Example - https://495.vodka/ section with a plane with cloud, sorry it's not a codepen, but I think it's more comfortable from mobile, if need can do something on codepen.

[GreenSock 18,893 Likes (Superhero)]

As far as I can tell, it's a logical impossibility. If your layout depends on the screen height and the browser changes that screen hight by adding/removing the browser chrome when swiping in a certain direction, that by definition changes the size and therefore your layout is affected. I don't know of a magical fix to make it resize to fit the screen but not cause anything to reflow. See what I mean? 

 

Maybe someone else has an idea other than just not having your layout depend on the viewport size (or maybe lock it in after the initial load). 

[Roman Baranov 2 Likes (Newbie)]

Thanks for reply, yeah I'm also think it's not possible, just think maybe someone have any ideas.

[Visual-Q 979 Likes (Leader)]

I would think If the height is known at the start and it's a mobile device where you won't manually change screen size you could store it as a flag variable at the start and key the heights the elements to that value rather than a dynamic screen height. I think Jack alluded to that.

 

One other idea is to calculate all height based on a ratio of screen width i.e. the vw unit. This is  great way to maintain the aspect ratio of elements. This won't scale dynamically to fit a screen height but it will retain the relative size and aspect ratio.

 

This article might help too.

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