New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.
Starred by 5 users

Issue metadata

Status: WontFix
Owner:
Last visit > 30 days ago
Closed: May 2015
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Feature


Show other hotlists

Hotlists containing this issue:
Relevant-for-Bootstrap-4


Sign in to add a comment
link

Issue 437860: CSS Animation Callbacks Fail When Parent Element Hidden

Reported by jacklu...@gmail.com, Dec 1 2014

Issue description

UserAgent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36

Example URL:

Steps to reproduce the problem:
1. Add Keyframe Animation to Child Element
2. Hide parent element during animation
3. Child element animationend event does not fire

What is the expected behavior?
Child element should discontinue animation and immediately fire animationend event.

What went wrong?
This is most likely related to https://code.google.com/p/chromium/issues/detail?id=135350
and webkits optimization for display:none;

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? No 

Does this work in other browsers? Yes 

Chrome version: 39.0.2171.71  Channel: stable
OS Version: 6.3
Flash Version: Shockwave Flash 15.0 r0

This affects many of my components for Semantic UI, and MANY common UI scenarios. 

For example having a dimmer and modal both hiding at same time with the same animation duration length leads to race conditions. The same thing occurs with a dropdown menu and a child menu both animating at same time.
 

Comment 1 by jacklu...@gmail.com, Dec 1 2014

There's an animated-gif of the bug, and some discussion here
https://github.com/Semantic-Org/Semantic-UI/issues/1288#issuecomment-64437087

Comment 2 by durga.behera@chromium.org, Dec 2 2014

Labels: Needs-Feedback
jacklukic@ : Thanks for the issue. Would you mind providing any sample url/jsonfiddle if it can be verified from QA side.
If so please provide the corresponding steps to perform and desired results to be observed for reproducible of the issue.

Comment 3 by jacklu...@gmail.com, Dec 2 2014

Here's the test case

http://jsfiddle.net/s4x898np/

If you click the "broken" button, you will see the animationend event will not fire. If you click the "working" button it will fire correctly.

In Firefox, if you click both buttons they will work correctly. AnimationEnd event still fires on content after parent hidden.

Comment 4 by cagrimm...@gmail.com, Dec 6 2014

I can verify this issue. I was using hidden elements and -webkit-animationend to trigger states dropping in on this infographic: http://www.thefire-dev.wp.eresources.ws/spotlight2015/

My client called me and complained that they loaded on page load all of a sudden, and I narrowed down the issue to the Chrome update, since it was the only thing differentiating when these worked and when they stopped.  I commented out these triggers out in lines 417-421 in the source of the above URL if you want to remove the comments in a fiddle and verify.  The working version removed these triggers.

Comment 5 by nyerramilli@chromium.org, Jan 8 2015

Cc: nyerramilli@chromium.org
Labels: -Cr-Content -OS-Windows -Needs-Feedback Cr-Blink-CSS OS-All M-41
Status: Untriaged
Thanks for the jsfiddle..

Able to reproduce this issue on Win7, Chrome Stable version 39.0.2171.95 (Official Build) m, Canary 41.0.2269.0 (Official Build), on Mac OS X 10.9.5 Canary # 41.0.2269.0 & Ubuntu 12.04 32 bit Chrome stable # 39.0.2171.95

Note : Not a regression, issue existing from M18 # 18.0.1000.0 (Official Build 116827)

Comment 6 by timloh@chromium.org, Jan 8 2015

Labels: Cr-Blink-Animation

Comment 7 by dstockwell@chromium.org, Jan 8 2015

This sounds like a bug in firefox. From the css-animations specification:

"Setting the display property to none will terminate any running animation applied to the element and its descendants."

Do any other browsers exhibit the same behavior as firefox?

Comment 8 by jacklu...@gmail.com, Jan 9 2015

"The animationend event occurs when the animation finishes."
http://www.w3.org/TR/css3-animations/

No further guidance is specified, but I assume that this would include prematurely terminated, as the end event will fire now even if the animation produces no tweening frames.

For developers, at least, this will remove hackish timeout calls from literally all tweening libraries that rely on transitionend to know when animations complete.

Comment 11 by pennymac@google.com, Jan 15 2015

Labels: -M-41 M-42 MovedFrom-41
Moving all non essential bugs to the next Milestone.

Comment 12 by dstockwell@chromium.org, Feb 13 2015

Labels: -Type-Bug Type-Feature
Status: Available

Comment 13 by amineer@chromium.org, Mar 3 2015

Labels: -M-42 MovedFrom-42
Status: Untriaged
[AUTO] This issue has already been moved once and is lower than Priority 1,therefore removing mstone.

Comment 14 by shans@chromium.org, Apr 22 2015

Owner: shans@chromium.org
Status: Assigned
It's unclear from the specification whether an animation terminating == that animation finishing. I've reached out to www-style for clarification.

Comment 15 by cvreb...@gmail.com, Apr 22 2015

Comment 16 by shans@chromium.org, May 5 2015

Status: WontFix
We now have a resolution from the WG: 
RESOLVED: No animation events when subtrees are destroyed.
(https://lists.w3.org/Archives/Public/www-style/2015Apr/0405.html)

Accordingly I'm going to close this bug as WontFix.

Comment 17 by jacklu...@gmail.com, May 5 2015

That makes absolutely no sense. This is case in point why standards bodies are so ridiculous

Comment 18 by shans@chromium.org, May 5 2015

Please limit posts to technical commentary.

Sign in to add a comment