Bug 188841 - [Web Animations] playbackRate setter does not visually update playback rate for accelerated animations
Summary: [Web Animations] playbackRate setter does not visually update playback rate f...
Status: RESOLVED DUPLICATE of bug 204717
Alias: None
Product: WebKit
Classification: Unclassified
Component: Animations (show other bugs)
Version: Safari Technology Preview
Hardware: Mac macOS 10.13
: P2 Normal
Assignee: Nobody
Keywords: InRadar
Depends on:
Reported: 2018-08-22 06:39 PDT by dwilson1
Modified: 2020-04-28 11:33 PDT (History)
5 users (show)

See Also:


Note You need to log in before you can comment on or make changes to this bug.
Description dwilson1 2018-08-22 06:39:32 PDT
Animations created by the Web Animations API do not visually adjust to new playback rates set by the playbackRate setter. If you read the playbackRate value, it properly shows the last set value, but the running animation still runs at 1x (regardless the set value). Note: There is often a noticeable jump in the animation as though the value has been updated, but the rate appears unchanged visually.


In the example, the input text field will update the playbackRate on the change event. It currently looks for support of updatePlaybackRate (unsupported in Safari TP 63) and falls back to the playbackRate property setter.

The console.log spits out the value from the playbackRate getter after the set (and show s the expected value), but visually the animation keeps at a 1x rate.

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

let animation = element.animate([ { transform: 'translateX(-100%)' }, { transform: 'translateX(100%)' } ], {
  duration: 1000,
  iterations: Infinity

2. Immediately update playbackRate to something noticeably slower or faster

animation.playbackRate = .1;

Expected Results:
Each iteration of the animation should take 10 seconds instead of the specified 1 second because the playback rate is set to 1/10.

Actual Results:
Animation keeps playing at a rate of 1x, with a total iteration length of 1 second

Build: Release 63 (Safari 12.1, WebKit 13607.1.2.1)
Comment 1 Radar WebKit Bug Importer 2018-08-22 08:47:28 PDT
Comment 2 Antoine Quint 2018-09-03 04:59:27 PDT
This is specific to the animation of hardware-accelerated properties (transform and opacity). Changing the example to use margin-left works as expected.
Comment 3 dwilson1 2020-01-10 08:19:43 PST
FYI I updated the example to have both the transform (hardware accelerated) and marginLeft available.
Comment 4 Antoine Quint 2020-04-28 11:33:12 PDT

*** This bug has been marked as a duplicate of bug 204717 ***
Comment 5 Antoine Quint 2020-04-28 11:33:23 PDT
This will be fixed along with bug 204717.