Bug 199529 – [Web Animations] setting currentTime during to a time in delay/endDelay does not render properly for accelerated animations

• Status: RESOLVED
• Resolution: CONFIGURATION CHANGED
• Component: Animations

Filled Animations created by the Web Animations API (appears to be limited to accelerated animations like transform) do not render visually in the correct state when updating `currentTime` while paused to a value that is inside a `delay` or `endDelay`. It will resync to the proper state when calling `play()`.

Example:
https://codepen.io/danwilson/pen/xoaRGV?editors=0011

In the example, the input range acts as a scrubber for the timeline. It moves while the animation continues, and if you drag the nib it will seek through the animation. The animation here is 2000ms long, with delays of 4000ms on either side. The animation runs as expected unless you try to seek to a new point that is in the delay areas. Instead of showing the starting state while in the delay period or the ending state for the endDelay, it shows different states of the primary animation. As soon as you let go (and start playing the animation again) it corrects and gets to the proper currentTime.

You can also use the console and pause the animation directly and set the currentTime to something between 0ms and 4000ms (or 6000ms to 10000ms) to see how it does not respect the fill mode state.

I tried recreating with a marginLeft animation, and this issue did not happen, so it feels limited to transform or accelerated animations.

Steps to Reproduce:
1. Set up an animation such as:

let animation = element.animate([ { transform: 'translateX(-100%)' }, { transform: 'translateX(100%)' } ], {
  duration: 9000,
  delay: 10000,
  fill: 'both'
});

2. Pause the animation and update the currentTime to 9000 (still within the delay section)

animation.pause();
animation.currentTime = 9000;


Expected Results:
Animation displays the starting state.

Actual Results:
Animation displays the end state (the state that would appear at 9000 if there was a delay of 0ms)

[Radar WebKit Bug Importer]

<rdar://problem/52717757>

[Antoine Quint]

Thanks for the detailed report, I will definitely take a look at this soon but won't have time in the coming weeks.

[Antoine Quint]

I've tried this again with Safari 16 and it is working as expected.