Bug 141008 – Negative animation-delay is treated as 0s

• Component: CSS
• Status: RESOLVED CONFIGURATION CHANGED

[Lea Verou]

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.

[Peter Hrynkow]

Still not fixed in Safari Developer Preview 9.1.1

[Simon Fraser (smfr)]

We certainly handle negative animation-delay in some cases. I'm not sure why it doesn't work here.

[Radar WebKit Bug Importer]

<rdar://problem/25726956>

[Simon Fraser (smfr)]

Is this bug primarily about starting in the paused state?

[Lea Verou]

It's used to start halfway through an animation, often used in conjunction with animation-play-state: paused, but not only.

[Simon Fraser (smfr)]

Created attachment 276458 [details]
Test

Attachment shows that this works in the general case, but not when starting paused.

[Peter Hrynkow]

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.

[Simon Fraser (smfr)]

Right. I found a bug in animations with negative delay that are paused from the start, which I think is this bug.

[Simon Fraser (smfr)]

Created attachment 277132 [details]
Patch

[Daniel Bates]

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.

[Simon Fraser (smfr)]

https://trac.webkit.org/r200042

Hello!

This is broken in Safari 11.0.1 now. And also in Safari Developer Preview.

[Simon Fraser (smfr)]

Can you provide a URL or test case that shows the broken behavior?

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.

[Simon Fraser (smfr)]

I can reproduce. I wasn't able to determine if this is a regression.

[Simon Fraser (smfr)]

Created attachment 326919 [details]
Testcase

Still not fixed in Safari 11.1

[Antoine Quint]

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.