Browser sometimes ignores jQuery click event during CSS3 conversion

Question

When an element contains another element that is animated using the CSS transition , event events are sometimes not fired.

Test case: http://codepen.io/anon/pen/gbosy

I have a layout where a series of images have captions that appear on hover. When clicked, they launch the .slideDown neighboring element. The user is likely to be quickly clicked by the user. The problem is even more noticeable on a live site than in codefen.

About 90% of my clicks are followed in codefen, while when transitioning CSS transitions, 100% are respected.

Any suggestions are welcome.

I should note that the problem is easiest to replicate in Chrome, as it is less common in Safari and much less common in Firefox.

Answer 1

I think the key disables mouse events in p elements:

 p { pointer-events: none; } 

The problem arises because the click is generated from mousedown + mouseup, and if you do this at the edge of the transition, mousedown is in one element and mouseup is in another (and which does not generate a click),

Another way (not quite the same, but most likely users will not notice it) does this in mousedown, rather than clicking