Checkbox Hover State Sticky

[applejacko]

Checkbox hover state, it appears, is getting stuck, with it sometimes being stuck with a gray color, and sometimes not, after a touch ends. It happens only if you touch the checkbox itself, not the surrounding label and box. Touching the surrounding label or box makes it turn back white. It's a visual bug; the value of the checkbox is 100% correlated with the checked/unchecked visual appearance of the checkbox, not the gray vs. white color. If you override the .ui-btn-hover-c CSS with the .ui-btn-up-c CSS, this issue vanishes (but hover visuals on a hovering stylus-supported device like Galaxy Note II no longer works) showing it is the hover state getting stuck. Multiple shades of gray can happen from time to time too. Using jQuery Mobile 1.3.1 in a PhoneGap 2.9.0 app.

[arschmitz]

Please provide a jsbin testpage demonstrating the issue according to our contributing guidelines https://github.com/jquery/jquery-mobile/blob/master/CONTRIBUTING.md closing this issue as incomplete will re-open when info is provided

[applejacko]

http://jsbin.com/ofuhaw/277/edit?html,css,output
You need to run this on a mobile device to see the issue. Remove the CSS I provided to see the issue. Put the CSS back in to resolve (work around) it.

[applejacko]

Issue description: See above, happens in a mobile browser
Test page (see below): http://jsbin.com/ofuhaw/277/edit?html,css,output
Steps to reproduce: Remove my CSS override. Open http://jsbin.com/ofuhaw/277 in a mobile browser. Problem is Exhibited. Restore my CSS override. Workaround works, problem goes away.
Expected outcome: Touching on any part of the whole checkbox widget (checkbox + label + enclosing box) should not result in the gray hover style persisting after a touch.
Actual outcome: Touching on the checkbox part of the whole checkbox widget makes the color toggle (and PERSIST in that state) between hover style and up style.
Platforms/browsers (including version) and devices tested: Any mobile browser.
jQuery Mobile and jQuery core version used: 1.3.1, 1.9.1
Other relevant information, e.g. using PhoneGap: using PhoneGap 2.9.0.

How do I reopen this now??

[jaspermdegroot]

@applejacko

This is fixed in latest code / 1.4. See #5973. We won't do anther maintenance release for 1.3.

[applejacko]

It is definitely NOT fixed in 1.4! In fact, it got WORSE, because now clicking on the checkbox OR the label makes it toggle color! Try this: http://jsbin.com/ofuhaw/286/edit, using alpha 1.4...

1. Point a mobile browser at: http://jsbin.com/ofuhaw/286, say Safari with an iPhone.
2. Click on the label or the checkbox a few times.
3. You'll be able to get all four combinations: gray/checked, white/checked, gray/unchecked, white/unchecked.

Please, you need to point to this with a mobile browser to see it. See screen shot. This is with 1.4. And this screen shot is with no fingers on the checkboxes at the time it was taken.

Jack

[applejacko]

The fourth combination: "Apple" is unchecked and gray.

[applejacko]

@uGoMobi, could you please look at this again and reopen the bug ticket? If you point a MOBILE BROWSER at this jQM 1.4 example: http://jsbin.com/ofuhaw/286, you'll see four distinct checkbox states if you toggle them enough times:

• gray/checked
• gray/unchecked
• white/checked
• gray/unchecked

You'll see the issue in mere seconds.

You'll see the bug with an iPhone, Galaxy Note II, Galaxy S4, Motorola RAZR Maxx, among others. The only phone I know of at this point that does not show it is the Google Nexus 4; with this phone, the backgrounds never turn gray. So it fails with most phones.

Thanks,

Jack

P.S. I'm using these tags in the above example, jQM 1.4.0-alpha2:

< link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0-alpha.2/jquery.mobile-1.4.0-alpha.2.min.css" >
< script src="http://code.jquery.com/jquery-1.10.2.min.js" >< /script >
< script src="http://code.jquery.com/mobile/1.4.0-alpha.2/jquery.mobile-1.4.0-alpha.2.min.js" >< /script >

[applejacko]

@uGoMobi Jasper,

Can we please discuss the status of this? My sample show this to not be fixed in jQM 1.4.

Thanks,

Jack

[gabrielschulhof]

@applejacko we're going to port jQuery UI's checkboxradio widget to jQuery Mobile version 1.5.0. This widget will also appear in jQuery UI 1.12.0. Thus, if you find that the hover problem persists in either of these versions, please file a bug about it at http://bugs.jqueryui.com/