Bug 225871 – Transition started from requestAnimationFrame differs from other browsers

• Status: NEW
• Component: Animations

[Simon Fraser (smfr)]

https://safari-raf-bug.glitch.me shows an issue where WebKit behavior differs from Chrome and Firefox. The testcase is:

document.querySelector('button').addEventListener('click', () => {
  const test = document.querySelector('.test');
  test.style.transform = 'translate(400px, 0)';
  
  requestAnimationFrame(() => {
    test.style.transition = 'transform 3s linear';
    test.style.transform = 'translate(200px, 0)';
  });
});

Safari transitions from 400px to 200px. Other browsers transition from 0 to 200px;

[Antoine Quint]

Created attachment 428917 [details]
Test

I rewrote the test to make it so the transition can be re-started and not using transform to remove accelerated animations from the equation. This may be a style resolution issue where we see the style as the value set on the inline style before the animation frame is triggered, where other browsers don't. Indeed, forcing a style recalc by calling getComputedStyle() after the animation frame shows the same behavior across browsers.

[Simon Fraser (smfr)]

Does it reproduce with a software animation (e.g. on 'left')?

[Antoine Quint]

(In reply to Simon Fraser (smfr) from comment #2)
> Does it reproduce with a software animation (e.g. on 'left')?

Yes, the test I've attached uses margin-left.

This has been broken for a long time, I tried with r236648, the oldest I could find for my system, and it was already broken this way.

[Radar WebKit Bug Importer]

<rdar://problem/78400632>

[Andrea]

Hey, this bug is opened for a long time and still seems to be there. 
Are there any updates?

[Karl Dubost]

Apart of the interop bug that would be good to be fixed, are there any live websites currently broken because of this behavior? Or sites trying to work around?

[Karl Dubost]

Created attachment 472120 [details]
screen recording safari, firefox, chrome

screen recording in

Safari Technology Preview  199           20620.1.1
Firefox Nightly            130.0a1       13024.8.4
Google Chrome Canary       129.0.6641.0  6641.0

Notes:
Safari and Chrome behave the same way
Firefox is different