sticky :hover on mobile causes bad UX for button checkbox/radio groups toggle

[iatek]

It looks like data-toggle="buttons" does not correctly toggle the button state on mobile devices..

You can see this behavior here:

http://www.bootply.com/render/116436

Tested on iPhone (iOS7)

[cvrebert]

It toggles fine, you're just running into iOS Safari's sticky hover issue; see #12256.
The button/checkbox gets properly deselected, but it still has the hover (and the styles for :hover are similar to .active), and iOS Safari doesn't remove the hover unless the user clicks on something else.
This can be worked around with some extra JS, but it's not that elegant, so we currently don't include such code.

I am leaving this open as a docs issue, since iOS Safari's weird treatment of hover is worth documenting and has tripped up some folks.

[Thuurke]

I get the same experience on 3 android devices (2x Android 4.1.2, 1x cyanogenmod 4.2.2) using chrome browser.

[cvrebert]

Additionally see #10968.

[mdo]

I don't think there is any other option. You can't tap on something else like you would on desktop to remove hover or focus. Mobile Safari has no notion of that from what I hear from @fat.

[cvrebert]

On hold, pending resolution of #13049.

[mdo]

Is there a docs fix to apply here, or can we punt this as a can't fix for the time being while we work out our mobile hover strategy? (Ugh, yeah, I wrote that.)

[cvrebert]

The docs fix was going to be a general "Beware of :hover and :focus stickiness on mobile" warning. IMO, it's still the least we can do, especially if we're punting on the underlying issue.

[mdo]

Yeah, I'm down for that.

[hnrch02]

@cvrebert Any news on the docs fix?

[cvrebert]

@hnrch02 I've done a bit of testing, but still need to check Android and also :focus.

[mdo]

Punting this to v4.

[cvrebert]

Docs to crib from:
https://github.com/google/WebFundamentals/blob/44c287c222dd6ede629a700ac3ddd8112674c46e/src/_langs/en/fundamentals/input/touch/activestates/index.markdown

[cvrebert]

Final note: We're looking at making:hover and :active styles more distinct from each other in Bootstrap v4.
And shameless plug: https://github.com/cvrebert/mq4-hover-hover-shim