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 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-control from 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 :focus styles to an element with the autofocus attribute set), or a javascript event.