Bug 51945 – transitionend doesn't fire if parent element gets display: none before transition completes

• Status: RESOLVED
• Resolution: INVALID
• Component: CSS

[Michael Gauthier]

Using CSS3 transitions, the transitionend event doesn't fire if a parent element gets display: none set after the transition starts, but before the transition completes.

In Firefox 4, the transitionend event gets fired at the appropriate time even though the transition is no longer visible.

See test: http://labs.silverorange.com/files/webkit-bug/

[Michael Gauthier]

This bug is still present in Chrome 19 (WebKit 536.5) and Safari 4 (WebKit 534.51.22)

[Nathan Whittaker]

+1

[tenbits]

Additional event, like 'transitioninterrupt' would be much better in this case.

[Andreas Prudzilko]

+1 for this, still present at 31.0.1650.63 m. IE seems to suffer from the same problem, only firefox fires the event, regardless whether parent is visible or not.

[Chris Rebert]

Actually, it's Firefox that's buggy in this case:
https://bugzilla.mozilla.org/show_bug.cgi?id=1182856

The CSSWG decided that transitionend/animationend events shouldn't be fired in such cases:
https://lists.w3.org/Archives/Public/www-style/2015Apr/0405.html
(See "AnimationEnd events and display: none" sections)

(See also https://bugs.chromium.org/p/chromium/issues/detail?id=437860 )

(In reply to comment #3)
> Additional event, like 'transitioninterrupt' would be much better in this
> case.

CSS Transitions Level 2 is adding a 'transitioncancel' event for that:
https://drafts.csswg.org/css-transitions-2/#eventdef-transitionevent-transitioncancel

[Ahmad Saleem]

Can this be marked as "RESOLVED WONTFIX" based on Comment 05 because Firefox fixed this on their end and Safari / Chrome were aligned with web-spec already. Thanks!