Actual Viewport?

[Creek]

Although this isn't directly related to GSAP - I'm guessing the gurus here have run into this and know the quick and easy solution? 

 

My responsive design is working as expected within both the Firefox and Chrome web developer responsive test environments. Tests all seem to indicate the design is conforming as I adjust the viewport. 

 

But then - testing in an actual mobile browser - I'm not sure what the proper terminology is - but... the address bar, bookmarks, the little slice of browser on the bottom? 

 

For whatever bizarre reason - the browser interface is apparently not included when the browser is determining the viewport? The viewport height apparently includes that interface for whatever reason? So - elements that work perfectly at 100vh within the "test environments" are actually cut off at the top and the bottom when viewed in the actual mobile browser. 

 

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

I'm guessing or at least hoping that there's a different way to indicate the content in that statement - that indicates that the actual viewport - the area available for animation - must comply with whatever user interface the browser might provide that is actually taking up the viewport space? 

 

My design can't possibly adapt to an unknown? I'm so very much hoping that it's just a different viewport statement - that fixes this nonsense? Who exactly would ever be designing for the actual height of the device - if 20% of that space isn't even available?  You'd think we'd all be designing for the height ACTUALLY available within the browser window. Seems completely illogical and nonsensical otherwise? When you resize a desktop browser, the viewport changes as expected. Only at full screen, Safari overlays its interface into the viewport height until you click into the actual viewable area. 

 

So I'm guessing I've just missed the quick and easy fix? Otherwise, 100vh has no meaning? Or maybe it's a media query? Solving for viewport area hidden by browser features with some weird calc function? 100vh - browser features with browser-features margin top and browser-features margin-bottom? And then we arrive at the actual usable height, the area actually available within the viewport to present our animation? 

[akapowl]

 

Hello @Creek

 

This has been a problem for many, many years now and if you just google something like "100vh mobile" you will find lots of different approaches trying to somehow work around or fix that.

 

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

https://allthingssmitty.com/2020/05/11/css-fix-for-100vh-in-mobile-webkit/

https://chanind.github.io/javascript/2019/09/28/avoid-100vh-on-mobile-web.html

https://dev.to/rachelg/a-javascript-fix-for-the-100vh-problem-on-mobile-screens-9im

https://dev.to/admitkard/mobile-issue-with-100vh-height-100-100vh-3-solutions-3nae

https://ilxanlar.medium.com/you-shouldnt-rely-on-css-100vh-and-here-s-why-1b4721e74487

 

I tried a couple of those myself, and while I stuck with the JS / CSS-variable hybrid approach mentioned in at least one of those articles (e.g. on css-tricks.com), I found that none of them worked 100% reliable all across the board (your mileage may vary) - because, and that is the best thing (it's not actually good at all), different mobile browsers handle vh units very diffferently. So there probably is no 100% fail safe silver bullet solution to this for now.

 

On the bright side; slowly but surely, there are new vh units on their way into browsers, which will hopefully make things a bit more controllable - which doesn't necessarily mean it will get less complicated, as there appear to be a lot of those on the horizon, some for rather specific scenarios.

 

https://dev.to/frehner/css-vh-dvh-lvh-svh-and-vw-units-27k4

https://www.bram.us/2021/07/08/the-large-small-and-dynamic-viewports/

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

 

[Creek]

Psyched to see the css-tricks solution. Very simple and straight-forward. 

[Creek]

In working through akapowl's links - it appears that the workaround mobile logic is sadly breaking other logic that formerly worked fine? And I apparently can only actually test the design through the phone? Not exactly an optimal experience. 

 

I still need to use viewport units - and they're obviously not playing nice with the percentages. 7vh is 7% of 100vh - it's obviously not 7% of 100% minus whatever space the random "ghost bars" take away? 

 

If anyone else is running into the same issues - here's a link to running Simulator via XCode on MacOS: 

 

https://www.viget.com/articles/set-up-simulator-and-test-ios-mobile-safari-on-mac/

 

Huge download, but ridiculously easy to set up. So far, it's been insanely helpful in at least having an actual test environment for mobile devices. 

 

If any of the gurus might happen to know how to force any version of a browser's web developer tools to emulate the "ghost bars" for the mobile browsers - that would be awesome? 

Edited June 26, 2022 by Creek
Found Helpful Link for Emulator