iOS Safari Sticky input at bottom unwanted white space

Question

So I have an input at the bottom of my page, positioned like so:

    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;

When I open the keyboard on iOS Safai, there is unwanted whitespace below the input. You can scroll up from it but it shouldn't be there.

The highlighting is from Safari Dev console, I've highlighted HTML, so the extra whitespace is not being caused by my HTML/CSS I think...

This does not happen on Android.

Any Help?

Answer 1

iOS safari does not respect position: fixed when the input has focus. What seems to be happening is that the element's position attribute is changed to static.

There are a couple aways around this, but the ultimate best answer for now would be to not use fixed.

Additional reading: https://medium.com/@im_rahul/safari-and-position-fixed-978122be5f29