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

user_4042387 0
Viewed 19959

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.

enter image description here

ios11 modal-dialog input css jquery
8 Answers

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.
user_20212450
user_50988480
user_87758240

This solution helped me to fix IOS11 input problem: https://bitbucket.org/snippets/OlegChulakovStudio/RgBX8x

It also fixes annoying background scroll, when you try to scroll inside modal :)

Summary: You add position:fixed to body, cash window.pageYOffset and scroll to cashed position after popup close to prevent movement to the page top.

user_58694870

I had this iOS bugg with a login form inside a fixed header/banner element. There is a button inside the header to open the modal window with the login form. The actual modal window is absolute positioned, but the header/banner element is fixed.

I solved it quite easy with just a few rows of code. So what I am doing is that I am changing the fixed container to absolute, but only when the login form is open, it makes the magic with the input marker.

jQuery:

$('.ios #mob-login').on('click', function(){
  $('body').toggleClass('login-open');
});

CSS:

.ios body.login-open #banner-wrapper {
  position: absolute;
}

So now the fixed header becomes absolute. If it is iOS and only when the login box is open.

This might solve your problem if you have a similar problems.

Ps. You need a script to detect and write the class name ios/ios11 to <html> or similar, but I am not going into that in this post. You can find many solutions for that out there.

user_12253360

This bug also affects iframe inputs, so I believe the fix I found will also help with modals.

All that needs to be done is to apply a the following css to the input within the iframe.

input:hover {
   cursor: text
}

Here's an example: https://codepen.io/ryanoutloud/project/full/AEKGjj

user_11572260
Related