Bug 141008 - Negative animation-delay is treated as 0s
Summary: Negative animation-delay is treated as 0s
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Simon Fraser (smfr)
URL: http://result.dabblet.com/gist/dda915...
Keywords: InRadar
Depends on:
Reported: 2015-01-28 12:30 PST by Lea Verou
Modified: 2023-05-10 11:38 PDT (History)
10 users (show)

See Also:

Test (754 bytes, text/html)
2016-04-14 21:22 PDT, Simon Fraser (smfr)
no flags Details
Patch (9.46 KB, patch)
2016-04-22 20:20 PDT, Simon Fraser (smfr)
dbates: review+
Details | Formatted Diff | Diff
Testcase (1.10 KB, text/html)
2017-11-14 13:36 PST, Simon Fraser (smfr)
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
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
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]

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]
Comment 10 Daniel Bates 2016-04-22 22:05:53 PDT
Comment on attachment 277132 [details]

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
Comment 12 zyuzin.vitaly 2017-11-14 03:05:57 PST

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]
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.