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