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

How to fix Safari's html margin bottom bug in iOS 10.3.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/


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.


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.