Bug 327193 – [threaded-animations] scroll-driven animation draws a `translate` keyframe of `none` as the element's own `translate`

• Status: RESOLVED
• Resolution: FIXED
• Component: Animations

[Lucas Johnston]

Created attachment 481753 [details]
HTML for reproduction

Description

On iOS 27, a scroll-driven animation of `translate` whose keyframe is `none`, on an element that also has a base `translate`, is drawn as though `none` were the element's base `translate`. The animation interpolates from the first keyframe to the base value instead of to no translation, so an element animating from its base offset back to `none` never moves on screen.

Steps to reproduce

1. Open the attached test case in Safari on iOS 27.
2. Scroll down about 400px.

Expected

All three squares move down 200px relative to the page over the first 400px of scroll, and end level with one another.

Actual

The green square (no base `translate`, keyframes ending on `none`) and the blue square (base `translate: 0 -200px`, keyframes ending on `0 0`) move as expected. The red square (base `translate: 0 -200px`, keyframes ending on `none`) stays 200px up for the whole scroll. See the attached screenshots, before and after scrolling about 320px.

Notes

- On the site where this was found, `getComputedStyle()` and `getAnimations()` reported the animation progressing normally (for example `translate: 0px -102.3px` at progress 0.5, with a `ScrollTimeline` in the `running` state) while the screen showed the base `translate` the whole time. So the computed value looks correct, and the value drawn on screen does not, which suggests the threaded scroll-driven animation path added in Safari 26.4.
- Seen with `animation-timeline: scroll(root)` and with a named `view-timeline`, under finger scrolling and under scripted `scrollTo()` steps.
- `transform` keyframes ending on `none`, on an element with a base `transform`, are not affected. Ending the `translate` keyframes on `0 0`, or removing the base `translate`, avoids the bug.
- Reproduced in the iOS 27.0 simulator (Xcode 27.0, runtime 24A434). The same symptom was seen on an iPhone 17 Pro Max running Safari 27.0.1. Not tested on macOS.

[Lucas Johnston]

Created attachment 481754 [details]
Image showing reproduction based on HTML attached

[Antoine Quint]

Thanks for the report and the test, this should go a long way towards creating a fix. This also occurs in Safari 27 on macOS.

[Radar WebKit Bug Importer]

<rdar://problem/189882533>

[Antoine Quint]

Created attachment 481780 [details]
test case with a time-based animation

This is not specific to scroll-driven animations, a time-based animation also reproduces this.

[Antoine Quint]

The issue is that we don't distinguish `translate: none` being explicitly set and `translate` being omitted, so we revert to the base value when computing the `to` keyframe. Since the `from` keyframe is also the same as the base value, we interpolate between the same values. I expect this is all happening during the process of computing the keyframe values in the Web process when preparing the accelerated effect.

[Antoine Quint]

The `RenderStyle` that is passed to `AcceleratedEffectValues` returns nullptr when calling `translate()`. We need to know here that we must set an explicit identity value here.

[Antoine Quint]

Pull request: https://github.com/WebKit/WebKit/pull/76876

[EWS]

Committed 323583@main (39703572db48): <https://commits.webkit.org/323583@main>

Reviewed commits have been landed. Closing PR #76876 and removing active labels.