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

Lately, I experienced a similar situation with a Cordova WebApp and iOS10. The issue was back then, that the main view-container had a height of 100% and not 100vh. Take a look at your CSS or update your post with more information.

Answer 2

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/

Answer 3

I had a similar problem with a canvas element that took up the height of the webpage but had some whitespace underneath it when I scrolled. I set the canvas to display: block;. This solved the problem for me. Here is the question that I asked why is there white space under the canvas when I scroll down. Try to change the element's display property to block and see if that helps.

Answer 4

I had a similar problem of getting a blank space (or whatever color the body was set to) when scrolling all the way to the bottom in safari. I found this incredible explanation by Chris Coyier in his blog post:

Add the following meta to your HTML head:

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> 

Answer 5

Use a library. For example, your problem is a trivial task in bootstrap using Vertical Height set to 100.

<div class="vh-100"></div>

Answer 6

Had the same bag. I fix it with css.

html, body {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}