Search code examples
csshtmlresponsive-designcursor-position

Cursor moves off down in mobile site - Weird issue probably cz of apple keyboard

I am facing this weird issue which I think is because of apple keyboard. When I tap on the input field, the keyboard comes from the bottom and the cursor moves off down like this:

enter image description here

And when I scroll up with the modal open, it comes back to place like this:

enter image description here

What could be probable issue?

Solution

  • This is a known issue in iOS 11 which happens when an <input> element is inside a position:fixed container and is thoroughly described in this blogpost.

    The workarounds are for now:

    1. Making the modal window position: absolute instead of fixed
    2. Hiding the content behind the modal with display:none and stretching the modal to cover the whole page
    3. Avoiding modals altogether

    None of the workarounds is particularly a 100% solution, but none of the iOS 11 updates have yet fixed the issue.