Mobile Adress-Bar Fix (somewhat off-topic)

[iDad5]

My question is not strictly related to GSAP but the problem of  viewport resizing and the mobil browsers hiding the address bar very often gets problematic in conjunction with gsap - at least for me.

I've long since used a little utility  class that watches for window resizes and reports them with a delay. (I'm sure I'm not the only one.)

To get a handle on this address-bar hiding I reworked my class to discover when resizes are fired (solely)  due to this address-bar hiding. 

Essentially I use an invisible div of 1px width fixed to the body and an height of 90hv if the window.innerHeight changes but the computed height of that element stays the same I have a very high probability that the resize event has been fired due to the dynamical hiding of the adress-bar. 
(I do a little more stuff to make the guess even better, but I spare you the details)

 

I'm posting this, as I would be interested in the opinion of the learned people that roam this forum on some points:

Does any of you have a way better method to achieve what I do?

Namely I'm not to happy with a semantical useless div hanging around in my page - but always removing it and building it anew also seems nonsensical.

(I've made it invisible and set it not to receive clicks and put a negative z-indes on it for good measure)

But maybe someone knows of a way to calculate the (pixel-)size of vh without measuring an actual dom-element?

 

Edited March 23, 2022 by iDad5
Corrected a mix-up of innerHeight and innerWidth

[OSUblake]

Hi iDad5,

 

The address is always problematic, and is something we're trying to figure out for the next release of GSAP. The best solution is prevent it from hiding, but this doesn't seem possible with the latest version of Safari on iPhone. 😠

 

If you're just trying to measure the vh, it will be innerHeight, so I'm not sure why you're trying to measure a 90vh element. 90vh would just be innerHeight * 0.9.

 

Browsers also support safe areas, but I don't know if this will help you out.

https://webkit.org/blog/7929/designing-websites-for-iphone-x/

 

Some other articles on full height in mobile.

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

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

 

And we have a bunch of new units...

https://www.terluinwebdesign.nl/en/css/incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw/

 

[iDad5]

3 hours ago, OSUblake said:

If you're just trying to measure the vh, it will be innerHeight, so I'm not sure why you're trying to measure a 90vh element. 90vh would just be innerHeight * 0.9.

Actually it is not for Mobile-Safari. (the solution in your third link is based on that fact)

 

100vh measures the height of the viewport including the address-bar even when it is visible, while window.innerHeight at every stage returns the actual visibel screen-area. 100vh does not change when the address bar retreats, window.innerHeitgh does.

My script is in fact working well, is is just not as elegant a solution I would like it to be.   

(Im going for 90vh as smaller values might give unconclusive results in actual browser resizing scenarios when the browser is only slightly resized, and going for 100vh would run the risk of influencing the body height unduly) 

 

[GreenSock]

You might want to look into the brand new ScrollTrigger.normalizeScroll() as well as the new:

ScrollTrigger.config({ ignoreMobileResize: true });

Let us know if one or both help.