Mobile chrome browser on Android requires a tap for div to show

[jasan-s]

I visited https://react-div-100vh.vercel.app/ using my pixel 7 pro with Chrome. On initial load the after visiting the link the green div is not viewable, after tapping on screen the green div appears at bottom of screen.

[DustinBrett]

I had/have the same exact issue and had to make a complex solution involving reading innerHeight on load before anything else has happened. Otherwise it changes.

DustinBrett/daedalOS#274

[DustinBrett]

You should use the official css viewport variants, like 100svh which replicates what this library is trying to solve. https://caniuse.com/viewport-unit-variants

For this specific bug, those viewport units do not work.

There are a few issues related to this, but from what I have seen, it's an actual bug in mobile Chrome. It may be resolved at this point, but at the time before I had a solution, no viewport units helped this bug which actually changes the height upon interaction, which viewport units aren't related to.

[aquaductape]

You should use the official css viewport variants, like 100svh which replicates what this library is trying to solve. https://caniuse.com/viewport-unit-variants

For this specific bug, those viewport units do not work.

Huh interesting issue, I'm glad you were able to find a workaround

[DustinBrett]

You should use the official css viewport variants, like 100svh which replicates what this library is trying to solve. https://caniuse.com/viewport-unit-variants

For this specific bug, those viewport units do not work.

Huh interesting issue, I'm glad you were able to find a workaround

Thanks! I am not sure if @jasan-s solved his issue, but it was a very odd and annoying one.

Based on recent comments I got from others (vercel/next.js#63724 & DustinBrett/daedalOS#274 (comment) [SO issue]) it may be related to something that can be solved by adding an interactive-widget flag (https://developer.chrome.com/blog/viewport-resize-behavior#changing_the_default_behavior_in_chrome_108) to the <meta name="viewport /> content.

It sounded like it could be related to going to a page when your virtual keyboard WAS open, but going to the page closes it. It seemed like you needed to click the page for it to fully resize from it's initial load when the keyboard was still closing. But that is just me guessing. It didn't seem to be the viewport units though because it seemed to have the wrong information when it was doing the calculation vs when it detected interactions on the page.