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://codepe

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