How to fix the iOS 11 input element in fixed modals bug

Question

A bug in HTML inputs in the newly released iOS 11 is creating problems for websites that have input elements in fixed containers. Here is exactly what is happening and some possible workarounds.

If you have an in an fixed container and it is close enough to the bottom of the screen forcing the browser to scroll to make room for the keyboard, the cursor is put outside of the text input. This was a critical problem for us since one of our core functionalities relies on the user input through a fixed modal dialog.

This was a critical problem for us since one of our core functionalities relies on the user input through a fixed modal dialog.

Answer 1

For now there is no perfect fix for it. Two temporary options:

1. Change dialog/modal to position: absolute (Not recommended)
2. Try to remove background scrolling when modal/dialog opens and restore it when dialog close.

Detail for option 2: For example, you can set your root div (or whatever that has a scrollbar) as overflowY='hidden' when dialog opens, and change it back overflowY='' when dialog closes. (Drawback: browser will be scrolled to top when you open dialog/modal)

Note:

1. Do remember to detect OS/browser when trigger fixes, otherwise you will probably encounter problem in IE.
2. Follow this thread to get the newest update about this issue.

Answer 2

This solution helped me to fix in any IOS model.

First thing target only IOS devices with this code.

//target ios
var isMobile = {
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    }
}
if(isMobile.iOS()) { 
      jQuery('body').addClass('apple-ios');
}

then put this code in your css:

body.apple-ios.modal-open {
  position: fixed;
  width:100%;
}

If you are using wordpress and cache plugin, you need to empty all the cache.

Hope this help you.

Answer 3

I'm not sure if this is exactly the same issue you are facing, but this solution worked for me:

.modal-open {position:fixed;}

iOS 11 Safari bootstrap modal text area outside of cursor