Tapping below Bootstrap inputs can focus them in Mobile Safari #15968
5 participants
Hi @asafbrukarz!
You appear to have posted a live example (http://fiddle.jshell.net/9ryem7u4/show/light/), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:
- line 39, column 5: E003: Found one or more
.rows that were not children of a grid column or descendants of a.containeror.container-fluid
You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!
(Please note that this is a fully automated comment.)
None of our JS should be getting activated in this case, so the bug is very unlikely to be JS-related.
@cvrebert I wouldn't have thought that it was JS related either, but removing the JS file certainly makes a difference.
Right, but none of our JavaScript acts unbidden on forms or plain text form-controls... Maybe the mere act of adding a document event listener has some weird side-effect on Safari? IDK, just spitballing here.
Uhm, according to http://caniuse.com/#feat=autofocus autofocus isn't even implemented in iOS Safari.
Fork without the autofocus attribute: http://jsfiddle.net/gzxtb86c/3/
cvrebert
changed the title from Bootstrap inputs with autofocus act strangely in Mobile Safari to Tapping below Bootstrap inputs can focus them in Mobile Safari
Also, I can't repro the "keyboard doesn't pop up" part with either fiddle. Using iOS 8.1 on an actual iPhone 5S.
You're correct. It's only on the simulator that the keyboard doesn't pop up.
Also, a touch start event will trigger this behaviour, so it's not limited to tapping.
Sorry, I accidentally closed this issue.
The other point to note is that in your fork the focus style is not applied to the input, where in the original, the blue outline has been applied - even though Mobile Safari should not support autofocus at all.
Anyone willing to test this out? If not, I'm probably going to punt on it until after v4.
@mdo Already confirmed it earlier.
Filed WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=146244
Filed Safari bug: http://openradar.appspot.com/21509310
Fixed in WebKit: http://trac.webkit.org/changeset/191954
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:
When clicking in the area marked in red:
The input is focused:
The issue here is two-fold:
1. Touching anywhere on the screen trigger the input to focus - this even occurs on a scroll event
2. 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:
1. Removing EITHER bootstrap.min.css or bootstrap.min.js fixes the issue.
2. Removing
class: form-controlfrom the input style fixes the issue.3. 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
:focusstyles to an element with the autofocus attribute set), or a javascript event.