Bug 51945 - transitionend doesn't fire if parent element gets display: none before transition completes
Summary: transitionend doesn't fire if parent element gets display: none before transi...
Status: RESOLVED INVALID
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: PC Windows 7
: P2 Normal
Assignee: Nobody
URL: http://labs.silverorange.com/files/we...
Keywords:
Depends on:
Blocks:
 
Reported: 2011-01-05 12:32 PST by Michael Gauthier
Modified: 2022-07-24 13:41 PDT (History)
12 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Michael Gauthier 2011-01-05 12:32:03 PST
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/
Comment 1 Michael Gauthier 2012-06-14 12:04:59 PDT
This bug is still present in Chrome 19 (WebKit 536.5) and Safari 4 (WebKit 534.51.22)
Comment 2 Nathan Whittaker 2013-10-16 11:19:59 PDT
+1
Comment 3 tenbits 2013-10-27 18:10:38 PDT
Additional event, like 'transitioninterrupt' would be much better in this case.
Comment 4 Andreas Prudzilko 2014-01-08 07:02:17 PST
+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.
Comment 5 Chris Rebert 2016-02-18 23:39:08 PST
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
Comment 6 Ahmad Saleem 2022-07-24 11:41:00 PDT
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!