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.
The issue become even worse if you have an html inside your button:
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:
Other way around is to use mouseup or mousedown event handlers instead of click for such buttons.