Page height on mobile is too small when address bar is not visible

[Pireax]

Describe the bug When scrolling down on the page the address bar in chrome slowly starts to disappear and the page becomes larger, the content height does not update (html, body tag heights stay the same) and this causes a white area to appear at the bottom with the size of the address bar.

To Reproduce Steps to reproduce the behavior:

1. Go to any page
2. Scroll down a bit to make the browser address bar disappear

Expected behavior Page resizes to fit new viewport size

Screenshots

Smartphone (please complete the following information):

• Device: Xiaomi Mi 9T
• OS: Android 10
• Browser: Chrome
• Version: 83

Additional context Related post: https://developers.google.com/web/updates/2016/12/url-bar-resizing Adding position: fixed to the html tag somewhat fixes the issue but it's not very responsive, it still takes a while for the page to update the height.

[datdamnzotz]

This is going to be a hard one for me to fix... I don't have an droid to test on.

[Pireax]

I think this is chrome specific, does iOS not also have chrome? Anyhow the position: fixed seems like a quick fix but I don't know how that will affect other browsers (i.e. safari, etc.)

[codeGlaze]

We may just need to change to flex.

Edit: Firefox does it too

[datdamnzotz]

Works fine on IOS with chrome.