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

Update: This has been fixed as of iOS 11.3, but remember that your users still might be on lower versions a while longer.

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.

The bug

If you have an <input /> 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 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 fixed modal dialog.

Press enter or click to view image in full size

A simplified example of the issue we encountered when users were typing in their names. Clicking the button is also impossible.

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

Press enter or click to view image in full size

I am inspecting the focused text input, not the button.

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

I have reported the issue to Apple, and hopefully they will get around to fix it soon. Have you experienced this bug yet? Hit me up in the comments if you have any better ways to fix this.

Update #1

Apple has now released iOS 11.0.1, but this has not fixed the issue.

Update #2

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

Update #3

iOS 11.0.3 is out, and it 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 issue in the 11.2 beta as well.

Update #5

Another update is out, but, unsurprisingly, iOS 11.1.2 does not fix the issue.

Update #6

I just updated to iOS 11.2.1 and still no luck.

Update #7

When I started adding these updates I thought “one or two iOS updates and the bug will be fixed”, but here we are, iOS 11.2.5, and this bug still lives on.

Update #8

Finally, as of iOS 11.3 this has been resolved 🎉