Click Events on Elements with CSS Transition

Yesterday I faced interesting issue: click event sometimes doesn't get fired on html elements with css transition on :active state. For instance button with 3D push effect. In the example below try to click on the top edge of button and you can find a place where counter won't be updated.

Check out this Pen!

The issue become even worse if you have an html inside your button:

Check out this Pen!

Very annoying. It took me a while to figure out and seems like click event get fired only when you mousedown/mouseup on same html node. I found very interesting explanation and solution by Chris Coyier. The trick is to add :after pseudoelement with absolute position and proper left, right, top and bottom. Although Chris considered simple example without html inside button that approach seems to work in thit case too:

Check out this Pen!

Other way around is to use mouseup or mousedown event handlers instead of click for such buttons.

comments powered by Disqus
Made with in SPb