Bug 141008

Summary: Negative animation-delay is treated as 0s
Product: WebKit Reporter: Lea Verou <lea>
Component: CSSAssignee: Simon Fraser (smfr) <simon.fraser>
Status: RESOLVED CONFIGURATION CHANGED    
Severity: Normal CC: commit-queue, dino, dstockwell, graouts, igor.oliveira, kula.przemyslaw, peter, simon.fraser, webkit-bug-importer, zyuzin.vitaly
Priority: P2 Keywords: InRadar
Version: 528+ (Nightly build)   
Hardware: Unspecified   
OS: Unspecified   
URL: http://result.dabblet.com/gist/dda915b008971eb6808b
Attachments:
Description Flags
Test
none
Patch
dbates: review+
Testcase none

Description Lea Verou 2015-01-28 12:30:34 PST
Per spec: “A negative delay is valid. Similar to a delay of 0s, it means that the animation executes immediately, but is automatically progressed by the absolute value of the delay, as if the animation had started the specified time in the past, and so it appears to start partway through its active duration.” —http://w3.org/TR/css-animations/#animation-delay-property

Testcase works in Gecko, IE and Chrome and displays the boxes in a range of colors from red to yellowgreen. In Safari, all boxes are red, due to negative animation-delay being treated as 0s.
I tested in Safari 7, 8 and WebKit nightly. It doesn’t work in any of them.

Negative animation-delay is super useful, both for static interpolation, like what the testcase demonstrates, as well as statically stepping through an animation for debugging reasons. All other UAs support this, except WebKit.
Comment 1 Peter Hrynkow 2016-04-13 23:40:44 PDT
Still not fixed in Safari Developer Preview 9.1.1
Comment 2 Simon Fraser (smfr) 2016-04-14 08:26:46 PDT
We certainly handle negative animation-delay in some cases. I'm not sure why it doesn't work here.
Comment 3 Radar WebKit Bug Importer 2016-04-14 08:27:18 PDT
<rdar://problem/25726956>
Comment 4 Simon Fraser (smfr) 2016-04-14 13:50:26 PDT
Is this bug primarily about starting in the paused state?
Comment 5 Lea Verou 2016-04-14 14:29:51 PDT
It's used to start halfway through an animation, often used in conjunction with animation-play-state: paused, but not only.
Comment 6 Simon Fraser (smfr) 2016-04-14 21:22:56 PDT
Created attachment 276458 [details]
Test

Attachment shows that this works in the general case, but not when starting paused.
Comment 7 Peter Hrynkow 2016-04-14 22:53:35 PDT
Ideally, even if an animation is paused, a negative `animation-delay` value should allow the animation to appear paused, part-way through.

For example, a paused animation with `animation-delay: -0.5s` should appear paused at 0.5s from the start.
Comment 8 Simon Fraser (smfr) 2016-04-15 08:33:44 PDT
Right. I found a bug in animations with negative delay that are paused from the start, which I think is this bug.
Comment 9 Simon Fraser (smfr) 2016-04-22 20:20:50 PDT
Created attachment 277132 [details]
Patch
Comment 10 Daniel Bates 2016-04-22 22:05:53 PDT
Comment on attachment 277132 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=277132&action=review

> LayoutTests/animations/play-state-start-paused.html:20
> +        /* For manuel testing. */

manuel => manual

> LayoutTests/animations/play-state-start-paused.html:45
> +    <div class="container">

You may want to consider adding some text to explain that you can hover over these boxes to animate them when this test is run outside of a test tool (i.e. !window.testRunner) to make this feature more discoverable.
Comment 11 Simon Fraser (smfr) 2016-04-25 13:06:28 PDT
https://trac.webkit.org/r200042
Comment 12 zyuzin.vitaly 2017-11-14 03:05:57 PST
Hello!

This is broken in Safari 11.0.1 now. And also in Safari Developer Preview.
Comment 13 Simon Fraser (smfr) 2017-11-14 08:17:53 PST
Can you provide a URL or test case that shows the broken behavior?
Comment 14 zyuzin.vitaly 2017-11-14 12:05:18 PST
Yes, sure. This url http://result.dabblet.com/gist/dda915b008971eb6808b shows rectangles. Sometimes when I reload page they all are red, and sometimes everything is ok, animation working. When I reset animation in dev tools it starts working.

Video of this strange behavior is here https://yadi.sk/i/riuWHvt63PhajH.
Comment 15 Simon Fraser (smfr) 2017-11-14 13:35:46 PST
I can reproduce. I wasn't able to determine if this is a regression.
Comment 16 Simon Fraser (smfr) 2017-11-14 13:36:02 PST
Created attachment 326919 [details]
Testcase
Comment 17 kula.przemyslaw 2018-07-05 05:58:45 PDT
Still not fixed in Safari 11.1
Comment 18 Antoine Quint 2023-05-10 11:38:20 PDT
Both of the tests attached to this bug as well as the reported URL behave the same in shipping Safari, Chrome and Firefox. This is now fixed.