Bug 104371 - :active styling of buttons (or any element, really) is not removed on mouse-out
Summary: :active styling of buttons (or any element, really) is not removed on mouse-out
Status: UNCONFIRMED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Normal
Assignee: Nobody
URL: http://jsfiddle.net/S2Lez/
Keywords:
Depends on:
Blocks:
 
Reported: 2012-12-07 07:38 PST by Rick Fillion
Modified: 2013-03-25 15:55 PDT (History)
1 user (show)

See Also:


Attachments
Video showing that mouse out does not remove the :active styling of a button tag (1.58 MB, application/octet-stream)
2012-12-07 07:38 PST, Rick Fillion
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Rick Fillion 2012-12-07 07:38:52 PST
Created attachment 178216 [details]
Video showing that mouse out does not remove the :active styling of a button tag

Native buttons on just about all platforms stop showing their highlighted (active) state when the cursor exits the button while the mouse is down. Buttons in WebKit do not do this.

jQuery-UI works around this, and you can see it properly working here:
http://jqueryui.com/button/

They do so by keeping an ivar around to track which was the clicked element.  On mouse down they add a class to the button, on mouse out they remove that class, on mouse in they readd the class if the mouse-in element is the same as the ivar. It's a hack, but it's what I'll be stuck doing to get buttons that feel native.

I'm nearly certain that this used to work properly in WebKit, but I don't have old builds around to do testing.
Comment 1 Aivo Paas 2013-03-25 15:55:32 PDT
It happens because :hover and :active state are locked on mouse down. Which means that both :hover and :active in CSS are not applied when moving mouse around while holding a mouse button down. It should also be pointed out that other browsers don't have this bug, they behave like native apps.