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.
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.
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.
Possible workarounds
The bug is not apparent if the content of the body is the same height as the viewport. Unfortunately setting overflow: hidden; on the body to prevent the user from scrolling doesn’t work in iOS. We came up with three workarounds that would solve the problem for us.
- Change the container from
position: fixed;toposition: absolute;. The downside to this is that the user can easily scroll away from the modal that we wanted to take up the window real estate in the first place. - You could argue that modals does not work as well on smaller screens and the best workaround would be to not use modals at all, but this would be quite a big rewrite in our case, and we needed to get a fix out as soon as possible.
- What we found to be the best solution in our case is to keep the modal fixed, but to stretch it to the edges of the window, hiding the rest of the content in the body with
display: none;. This would remove the problem of the body height being higher than the viewport and there would be no background scrolling when focusing on the input.
Option 3 works well for us, but in some cases it will not. Be aware if you hide the rest of the content and need to go back to the context you were when you close the modal the browser has scrolled to the top.
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 🎉