How To Fix The Ios 11 Input Element

How to set the iOS 11 input element in stock-still modals bug

Update: This has been fixed as of iOS xi.iii, only recollect that your users still might be on lower versions a while longer.

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

The problems

If you have an <input /> in an stock-still container and information technology is shut enough to the bottom of the screen forcing the browser to ringlet to make room for the keyboard, the caret 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 stock-still modal dialog.

A simplified example of the effect nosotros encountered when users were typing in their names. Clicking the button is likewise impossible.

It looks terrible, but it gets worse. Inspecting the text input in Safari, you tin can encounter that the input is not where it is supposed to be. The input is overlaying the button making it incommunicable to click, and in our case making information technology impossible to submit the course.

I am inspecting the focused text input, **not** the push.

The issue is quite easy to reproduce. In the examples above I added some CSS to amend illustrate the issue, just all it really takes is the following HTML and CSS.

Possible workarounds

The issues is not apparent if the content of the torso is the same height as the viewport. Unfortunately setting overflow: hidden; on the body to forestall the user from scrolling doesn't work in iOS. Nosotros came upward with three workarounds that would solve the trouble for the states.

Modify the container from position: fixed; to position: absolute;. The downside to this is that the user can easily roll away from the modal that nosotros wanted to take upwards the window real estate in the first place.
You lot could argue that modals does not work equally well on smaller screens and the best workaround would exist to not use modals at all, just this would be quite a big rewrite in our case, and we needed to get a gear up out equally soon as possible.
What we found to be the all-time solution in our case is to keep the modal fixed, merely to stretch it to the edges of the window, hiding the rest of the content in the trunk with brandish: none;. This would remove the problem of the body elevation being college than the viewport and at that place would be no background scrolling when focusing on the input.

Pick 3 works well for us, but in some cases information technology will not. Be aware if you hibernate the residuum of the content and need to go back to the context yous were when you close the modal the browser has scrolled to the height.

I have reported the effect to Apple tree, and hopefully they will get around to set it before long. Have you experienced this bug even so? Hit me upwardly in the comments if you take any amend means to set this.

Update #one

Apple has now released iOS eleven.0.1, but this has not stock-still the consequence.

Update #2

iOS xi.0.2 has now been released, but the bug is still there. I have not been able to test the iOS eleven.1 beta yet, but if you have, let me know if they have fixed it.

Update #3

iOS 11.0.3 is out, and information technology is still an issue.

Update #4

Apple keeps on updating iOS, but no fixes in iOS 11.1 either, and according to the bug report people are still experiencing this result in the 11.2 beta besides.

Update #five

Another update is out, just, unsurprisingly, iOS eleven.1.2 does not ready the issue.

Update #vi

I just updated to iOS xi.2.1 and still no luck.

Update #7

When I started adding these updates I idea "1 or two iOS updates and the bug will exist fixed", simply here nosotros are, iOS 11.2.5, and this bug still lives on.