Fix without media query

[fregante]

body {
  height: 100vh;
}

should be fixed to

body {
  height: 100vh;
  height: -webkit-fill-available;
}

-webkit-fill-available is automatically ignored by browsers that don't understand it.

[simevidas]

It causes issues in Chrome: https://allthingssmitty.com/2020/05/11/css-fix-for-100vh-in-mobile-webkit/#comment-4910262284

When I first load this page in Chrome on Android, the MAIN element is several screens large for some reason, and I have to scroll down to get to the footer (first screenshot). But then when I pull-to-refresh, the page renders correctly (second screenshot).

[kripod]

Does the snippet used on CSS Tricks solve the issue?

body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}
html {
  height: -webkit-fill-available;
}

[simevidas]

@kripod It renders correctly in Chrome on my simple demo page: https://output.jsbin.com/noqasek/quiet.

But there is a problem in the new Firefox. The footer is behind the URL bar:

[kripod]

Thanks for the quick feedback! I’ll resort to a media query solution for now, then…

[kripod]

@simevidas I've just reported this bug towards Firefox for Android developers. Could you please comment about the Android device and Fenix version you're using over there?

[NullYing]

media query solution seem not work

[simevidas]

@kripod Sorry for the late response. The issue is still present in Firefox stable (85.1.1) on Moto G4. It’s an older device, so maybe that’s a factor. Could you share the link to the bug report? I’m curious if/how Mozilla responded.

[kripod]

@simevidas the report is available right here.