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

Dally

Same topic mentioned here: #33758054 – Colliery

Have you tried a normalize? necolas.github.io/normalize.css .😊 – Leet

Answer 1

This seems to be a long-standing bug in Safari on iOS (here a SO question with reproducible example).

Unfortunately the new CSS units (like svh and dvh) don't take into account the on-screen keyboard so they are no help.

(If you are in a Cordova or Capacitor app, I think there is a setting to handle the keyboard differently, but that's not available in Safari.)

The only viable workaround I've found is to simply close the keyboard when the user is scrolling the viewport. Very often, this is kind of nice UX anyway, since when the user scrolls, that means they're done typing into a small input box and want to see more of the content. For example:

const onTouchMove = () => inputRef.blur();

return
  <input
    type='text'
    ref={inputRef}
    onFocus={() => document.addEventListener('touchmove', onTouchMove) }
    onBlur={() => document.removeEventListener('touchmove', onTouchMove) }
    />

Exception

I tried plenty of other stuff and totally agree this is the best way to handle the trouble, other hacks & tricks don't work or have their own drawbacks. – Grose

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

Kowalczyk

Answer 3

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/

Christalchristalle

this doesn't work for the keyboard-problem mentioned by the OP... – Exception

There's now a dvh unit. So min-height: 100dvh for example would work. developer.mozilla.org/en-US/docs/Web/CSS/… – Christalchristalle

no, unfortunately svh and dvh don't take into account the on-screen keyboard, see web.dev/viewport-units – Exception

Answer 4

UPDATE: this answer does not longer work. Apple's Safari is the new Internet Explorer. As a developer, I personally hate Safari nowadays.

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"> 

Proposal

Answer 5

I can confirm @mb21's post here is the only one that works well.

blur any inputs on a touchmove event, the keyboard retreats and the user can scroll without any ios safari weirdness.

like this in vanilla js:

    function blurInputs() {
            const inputs = document.querySelectorAll('input')

            inputs.forEach(input => {
                input.blur();
            }); 
        }

    document.addEventListener('touchmove', blurInputs)

Peasecod

Answer 6

I have faced this issue before. Perhaps you can fix it with some CSS tricks:

1. Set the overflow of the HTML and body to hidden.

2. Set either overscroll-behavior-y: contain; or overscroll-behavior-y: none; (try both to see which one works).

3. Set the position of the body to fixed and inset to 0.

4. Create a container inside the body with height and width set to 100% and overflow: auto.

   html, body {
     overflow: hidden;
   }
   
     body {
     position: fixed;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
   }
   
   body > .container {
     display: flex;
     height: 100%;
     width: 100%;
     overflow: auto;
     flex-direction: column;
   }
   

Sessler

I don't think this works, at least not in iPhone Safari 17. I get the same blank space at the bottom of the page when the keyboard is activated. – Obstruent

Answer 7

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.

Meredeth

Answer 8

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

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

Glendon

Answer 9

Had the same bag. I fix it with css.

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

Milkweed