New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
iatek opened this Issue Feb 24, 2014 · 13 comments

Comments

Projects
None yet
5 participants
@iatek
Contributor

iatek commented Feb 24, 2014

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 cvrebert added the docs label Feb 24, 2014

@cvrebert cvrebert added this to the v3.2.0 milestone Feb 24, 2014

@cvrebert

This comment has been minimized.

Member

cvrebert commented Feb 24, 2014

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

This comment has been minimized.

Thuurke commented Feb 24, 2014

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

@cvrebert

This comment has been minimized.

Member

cvrebert commented Feb 24, 2014

Additionally see #10968.

@mdo

This comment has been minimized.

Member

mdo commented Mar 7, 2014

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

This comment has been minimized.

Member

cvrebert commented Mar 13, 2014

On hold, pending resolution of #13049.

@cvrebert cvrebert changed the title from Button checkbox/radio groups toggle not working on mobile to sticky :hover on mobile causes bad UX for button checkbox/radio groups toggle May 7, 2014

@cvrebert cvrebert modified the milestones: v3.2.1, v3.2.0 May 23, 2014

@mdo

This comment has been minimized.

Member

mdo commented Jun 19, 2014

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

This comment has been minimized.

Member

cvrebert commented Jun 19, 2014

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

This comment has been minimized.

Member

mdo commented Jun 19, 2014

Yeah, I'm down for that.

@hnrch02

This comment has been minimized.

Member

hnrch02 commented Sep 16, 2014

@cvrebert Any news on the docs fix?

@cvrebert

This comment has been minimized.

Member

cvrebert commented Sep 16, 2014

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

@mdo

This comment has been minimized.

Member

mdo commented Jan 18, 2015

Punting this to v4.

@mdo mdo closed this Jan 18, 2015

@mdo mdo removed this from the v3.3.2 milestone Jan 18, 2015

@cvrebert cvrebert reopened this Jan 21, 2015

@cvrebert cvrebert added this to the v3.3.4 milestone Jan 21, 2015

@cvrebert

This comment has been minimized.

Member

cvrebert commented Jan 21, 2015

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

@twbs twbs locked and limited conversation to collaborators Jan 21, 2015

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.