Page 1

To observe behavioural differences in the way browsers emit animationend, perform the following steps:

  1. Click "Pop" and wait for the popup to appear. You should see an alert telling you that an animationend event has occurred.
  2. Dismiss the popup by clicking somewhere outside of it.
  3. The outgoing fade transition is made intentionally slow to give you time to click the link inside the popup even as the popup is in the process of fading out. Click the link inside the popup once the popup is about halfway faded out.

    At this point you will be taken to Page 2 without a transition. FF will give you an animationend event, but Chrome will not. In Chrome, you only get animationend once you re-display Page 1. Note that the popup's transition interruption routine cannot handle the case where the user clicks a link as the popup's outgoing transition is already in progress.

    So, if you never return to Page 1, your handler will stay attached and will never fire.

Pop
Back

Page 2