Transition started from requestAnimationFrame differs from other browsers

• Component: Animations
• Status: NEW ---

[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>