CSS transition-duration set with 0s is ignored
Reported by
mambolo...@gmail.com,
Feb 24 2017
|
|||||||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36 Steps to reproduce the problem: 1. Apply some transitions on an element and at least a global transition (for example : transition: 1s ease-out) 2. Set one specific duration for a property that is 0s (for example : transition: 1s ease-out, 0s background;) 3. The property with 0s as duration still got a transition What is the expected behavior? The duration should be 0s What went wrong? If you set a global transition on your element then you specify that one of the CSS property has 0s of duration, that specific property still gets the global duration. If you set the duration to any other duration (even 0.001s) then the new duration is applied. You can check it live in this demo : http://codepen.io/Mamboleoo/pen/PpovzQ The left div has a duration of 0s for the background but on hover it has a transition. On the right, the background has a duration of 0.001s and it doesn't get the global duration anymore. Did this work before? N/A Does this work in other browsers? N/A Chrome version: 56.0.2924.87 Channel: stable OS Version: 10.0 Flash Version: Shockwave Flash 24.0 r0
,
Feb 28 2017
mambolouis@ - Thanks for filing this issue...!! Could you please provide a sample URL or html file to test this issue. This will help us in triaging the issue further. Thanks...!!
,
Mar 1 2017
Thanks for providing feedback. Removing "Needs-Feedback" label.
,
Mar 1 2017
,
Mar 1 2017
Looks like the bug is this bit in CSSAnimations.cpp:calculateTransitionUpdateForProperty().
Timing timing = transitionData.convertToTiming(transitionIndex);
if (timing.startDelay + timing.iterationDuration <= 0)
return;
,
Mar 1 2017
Firefox behaves the same as Chrome but the spec suggests that we should be not starting any transitions on background in that example. https://drafts.csswg.org/css-transitions/#transition-property-property "If a property is specified multiple times in the value of transition-property (either on its own, via a shorthand that contains it, or via the all value), then the transition that starts uses the duration, delay, and timing function at the index corresponding to the last item in the value of transition-property that calls for animating that property."
,
Mar 2 2017
Fix here: https://codereview.chromium.org/2726923005
,
Mar 2 2017
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/0c248cbece92af7bedfba65d35ac875153206f85 commit 0c248cbece92af7bedfba65d35ac875153206f85 Author: alancutter <alancutter@chromium.org> Date: Thu Mar 02 07:12:39 2017 Clear started transitions overwritten by duration 0 transitions on the same property This patch ensures that transitions on properties don't start if they're specified with 0s duration but have non-zero duration in prior transition layers. Example: "transition: all 1s, left 0s" should not start transitions on left. BUG= 695875 Review-Url: https://codereview.chromium.org/2726923005 Cr-Commit-Position: refs/heads/master@{#454200} [add] https://crrev.com/0c248cbece92af7bedfba65d35ac875153206f85/third_party/WebKit/LayoutTests/transitions/transition-property-layer-collision.html [modify] https://crrev.com/0c248cbece92af7bedfba65d35ac875153206f85/third_party/WebKit/Source/core/animation/css/CSSAnimationUpdate.h [modify] https://crrev.com/0c248cbece92af7bedfba65d35ac875153206f85/third_party/WebKit/Source/core/animation/css/CSSAnimations.cpp
,
Mar 2 2017
|
|||||||
►
Sign in to add a comment |
|||||||
Comment 1 by ligim...@chromium.org
, Feb 24 2017