URL Bar on Android Chrome makes full height content hidden unless user scrolls using 100VH

This is a hard one to try and explain, so please bear with me.

I have essentially 3 divs, Head, Content and Footer.
The footer always is hidden on Android because for some reason the browser gives me a 100vh size that isnt equal to the actual view height. The damn URL bar seems to cover some.

So the user needs to scroll on the page to hide the URL bar and then see the footer.

yet on other browsers and phones the browser reports 100vh as what is visible including the URL bar.

Googled for hours and not many people seem to have this problem, the ones that do dont seem to find a useful fix.

Anyone got any ideas what to do to get a 100% height HTML page using 100vh and actually not mess up the application on every other phone or device that isnt using google chrome for android.

I found this update by Chrome that covers what they did with plenty of complaints and yet they went ahead and did it.

https://developers.google.com/web/updates/2016/12/url-bar-resizing

Cant find a good workaround for their trickery.

Any ideas?

Answer

That’s a pretty common issue – and the issue is not considered a bug, here’s an article on that topic:

https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html

This may be solved by CSS environment variables env() as suggested in CSSWG:
https://github.com/w3c/csswg-drafts/issues/2630#issuecomment-397536046