Bug 104371

Summary: :active styling of buttons (or any element, really) is not removed on mouse-out
Product: WebKit Reporter: Rick Fillion <rick>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: UNCONFIRMED    
Severity: Normal CC: aivopaas
Priority: P2    
Version: 528+ (Nightly build)   
Hardware: All   
OS: All   
URL: http://jsfiddle.net/S2Lez/
Attachments:
Description Flags
Video showing that mouse out does not remove the :active styling of a button tag none

Rick Fillion
Reported 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.
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
View All Add attachment proposed patch, testcase, etc.
Aivo Paas
Comment 1 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.
Note You need to log in before you can comment on or make changes to this bug.