Browser sometimes ignores a jQuery click event during a CSS3 transform

Question

When an element contains another element that is being animated via a CSS transition, click events are occasionally not fired.

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

I have a layout where a series of images have captions which are revealed on hover. On click they fire off a .slideDown of an adjacent element. They themselves are likely to be quickly clicked through by a user. The problem is even more noticeable on a live site than in the codepen.

In the codepen, approximately 90% of my clicks are being obeyed, whereas when CSS transitions are disabled, 100% are obeyed.

Any suggestions are welcome.

I should note that the issue is easiest to replicate in Chrome, with it being less common in Safari, and significantly less common in Firefox.

Answer 1

I think that the key is disabling mouse events in the p elements:

p {
  pointer-events: none;
}

the problem arises because the click is generated from a mousedown + a mouseup, and if you do it in the edge of the transition the mousedown is in one element and the mouseup in another (and that doesn't generate the click).

The other way around (not really the same, but most probably the users won't notice it) is doing it in mousedown instead of click