onyx buttons in Chrome 30 - :active:hover

edited December 2013 in Enyo 2
In recent versions of Chrome on Android I've noticed an issue where the :active:hover CSS selector does not appear to work as in earlier versions of the browser. Onyx uses the :active:hover selector to show the button as "pressed".

I've noticed that in the new Chrome 30 based WebView in Android 4.4, if you press a button quickly, it often nolonger renders the 'pressed' state. One slow deliberate tap yes, but a series of quick ones often do not render. And its possible to press a button and then drag out of the button area and after lifting your finger, the button still appears pressed (sometimes).

I can repro this in the Android Chrome Browser too (31.0.1650.59 / Blink 437.36) with the Enyo 2 Sampler app viewing the Onyx Buttons.
I did not see this issue in embedded versions of the old Android Browser WebView.

Is this something that is a known issue with Enyo? Are there any better means of addressing a more accurate 'pressed' state? Perhaps manually toggling classes based on touch events?
I've seen this behavior on buttons, but also just other controls using :active:hover as well.

While the new browser is much faster, because the buttons do not appear as responsive the UI just feels more sluggish.


  • edited December 2013
    I too reproduce your issues -- the legacy Browser has quick CSS response to touch, while Chrome 32 is delayed.

    http://googlechromereleases.blogspot.com/ is a good resource for tracking changes in the various versions of Chrome. However, I didn't see anything there like your issue. I spent a little time digging into their bug system, and https://code.google.com/p/chromium/issues/detail?id=306581 seems to be related. https://code.google.com/p/chromium/issues/detail?id=169642 also looks like one to watch.

    I like the idea of using touch to apply a hover-like style. Can you file a bug at http://jira.enyojs.com with this?
  • Thanks, I've filed a bug - ENYO-3625 Thanks for the pointers, will investigate further and using touch events for setting the state.
  • edited December 2013
    There is already a fix for this in onyx.Button for applying "pressed" state for FirefoxOS. It could either be extended to look for androidChrome >= 30 as well, or just applied for all platforms.

    Toggling the class addresses the responsiveness to touch, though it doesnt seem to address the case where you tap and then drag out of the button. Tap and hold the button, drag out of the area, release and the :active:hover styles are still applied and the button looks pressed. I'm seeing the "pressed" class correctly get removed by the code, but the effect as applied by :active:hover is not removed until there is a new touch to the screen.

    Removing the use of :active:hover and always going with .pressed would address both of these issues.
Sign In or Register to comment.