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.

Dreda

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

Andiron

That works a treat. Thank you, I wasn't even aware of that CSS property. My only issue is that it's not supported on IE at all: developer.mozilla.org/en/docs/CSS/pointer-events Are you aware of any ways of doing that that are more widely supported? – Dreda

@Magnakai What intrigues me is that if I click on the links interchangeably really fast, the prevent-default call fails and the link is executed (the URL is loaded). I'm not sure why this happens. – Idyll

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 – Andiron

@Andiron Thank you! That's exactly it, well spotted and well explained. By the way, how did you diagnose that? Is it a problem you've come across before? – Dreda

Not exactly the same way, but yes, I had encountered that problem already. And I know that you can get mad with this kind of things. Nice that this helps you. By the way, may be it is more natural to do it in the mouseup, it's your choice. – Andiron

omg, you're a genius, this has been bugging me for the past days – Planimeter

OMG! You saved my night! I'm facing this issue in only Firefox – Interferometer