How to fix Safari's html margin bottom bug in iOS 10.3.1

Question

I noticed in iOS 10.3.1, while using safari and have the virtual keyboard activated, you can scroll the page up to all the way and leave empty space (same color as the body) between the HTML element and virtual keyboard.

You can see the blue area is what the inspector considers HTML element, and there is a white gap (or black if I set body background to black) between the virtual keyboard and the HTML.

Note that this gap doesn't appear automatically. You have to scroll up when the keyboard appears. I noticed this because I use javascript to do a scroll up to bottom to fix a bug with the Chinese 9 buttons keyboard (it will cover the bottom of the screen, which happens to be the textarea).

Answer 1

You can use this:

min-height: 100vh; min-height: -webkit-fill-available; 

the second line will push that element to fill the screen.

Here's the more about the hack: https://css-tricks.com/css-fix-for-100vh-in-mobile-webkit/