How To Fix Safari's Html Margin Bottom Bug In Ios 10.3.1

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) betwee

Solution 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/

Solution 2:

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.

Solution 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.

Solution 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:

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

Solution 5:

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

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