Tapping below Bootstrap inputs can focus them in Mobile Safari
Created by: asafbrukarz
This one has had me puzzled for a while and I've been trying to find a more specific cause, but I haven't managed to narrow it down further than Bootstrap.
The fiddle here is set up as follows:
- https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css
- https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js
- Mobile Safari on the iOS simulator (iPhone 6 - iOS 8.1, although I have confirmed this to also be the case on a physical iPhone)
When clicking in the area marked in red:
The issue here is two-fold:
- Touching anywhere on the screen trigger the input to focus - this even occurs on a scroll event
- The keyboard does not pop-up. Even if a user wanted to enter text into the input, they need to click it again to trigger the keyboard.
I have been able to confirm the following:
- Removing EITHER bootstrap.min.css or bootstrap.min.js fixes the issue.
- Removing
class: form-control
from the input style fixes the issue. - Mobile Safari does not attempt to autofocus form elements on its own.
Greatly appreciate your help in tracking down this issue. I'm not sure if it's a browser bug (caused by adding :focus
styles to an element with the autofocus attribute set), or a javascript event.