Button Deselect #11

ghost opened this Issue Apr 14, 2012 · 3 comments


None yet
2 participants

ghost commented Apr 14, 2012

This is more of a look and feel issue, but UIButtons when touched do not revert to their unselected state after being touched without another element being touched on. I imagine this is a focus issue (button having focus, being highlighted by Safari).

Consequently, this also applies to similar items like UISwitches.


rbiggs commented Apr 17, 2012

You're right on that. I'm thinking about maybe doing a universal timeout for buttons to blur them after a touchstart event. Otherwise they remain 'touched' until a touchend event is fired by the user touching somewhere else. Normal form inputs work with way on desktop browsers as well.
If I go that route, using a setTimeout, I'll need to do some pretty thorough testing to make sure that doesn't introduce some unforeseen problem with some widget. That will also need to be done with the navigation lists, since the cell items remain selected as well.
Anyway, this is one of those 'features' of mobile Webkit that has been bugging me for many moons now.

Since you have ported ChUI to Zepto, you can actually use the "tap" and "doubleTap" which does what you described. It might be easier.


rbiggs commented Apr 27, 2012

Actually, the problem has nothing to do with 'click', 'touchstart' or 'tap'. It has to do with how mobile Safari handle hover states defined in CSS. When mobile Safari sees a hover state in CSS, it applies it until a touchend event fires. It does matter what you do in you events to circumvent this. I put in the hover states to make it easy to test thing in a desktop browser before testing on a simulator on actual device. Now I'm going to have to separate out the hover states into a separate file and only load them when the app is in a desktop browser.

rbiggs closed this Nov 19, 2012

@rbiggs rbiggs pushed a commit that referenced this issue Feb 13, 2016

@sourcebits-robertbiggs sourcebits-robertbiggs Fixes Issues #9 and #11 for Flexbox syntax.
Fixed typos in flexbox notation and inheritance order.
Removed duplicate uglify task.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment