Bug 284540 – [scroll-animations] https://codepen.io/t_afif/full/ZEgjNxm does not work

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

[Antoine Quint]

The demo https://codepen.io/t_afif/full/ZEgjNxm does not work perfectly: fewer generated animations.

[Radar WebKit Bug Importer]

<rdar://problem/141356467>

[Antoine Quint]

We only yield 4 animations associated with the document timeline whereas Chrome yields an additional 8 animations associated with view timelines.

[Antoine Quint]

In WebKit, we get the following animation targets:

1. <progress max="100" value="70">…</progress>
2. <progress value=".5">…</progress>
3. <progress value=".2">…</progress>
4. <progress max="1000" value="920">…</progress>

In Chrome, we have the same animation targets but each with 3 animations.

[Antoine Quint]

The animations we fail to yield are those targeting `::before` and `::after` pseudo elements.

[Antoine Quint]

Hmm, `--timeline-scope` is involved here as well.

[Antoine Quint]

I've identified two separate issues at play here as we do not correctly:

1. resolve `animation-timeline` values, accounting for `timeline-scope`, within shadow roots
2. resolve custom properties on pseudo-elements of an element with a user-agent shadow root attached

I have a fix coming for the first issue, and I filed bug 287948 for the second issue. Hopefully, there aren't more issues lurking.

[Antoine Quint]

Issue number 1 is being tracked by bug 287950.

[Antoine Quint]

I believe bug 287948 is the only reason this demo isn't working but will only know for sure when it's fixed.

[Antoine Quint]

Indeed, works great as of 294784@main.