Bug 284540
| Summary: | [scroll-animations] https://codepen.io/t_afif/full/ZEgjNxm does not work | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Antoine Quint <graouts> |
| Component: | Animations | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED CONFIGURATION CHANGED | ||
| Severity: | Normal | CC: | graouts, karlcow, webkit-bug-importer |
| Priority: | P2 | Keywords: | InRadar |
| Version: | WebKit Nightly Build | ||
| Hardware: | Unspecified | ||
| OS: | Unspecified | ||
| Bug Depends on: | 287948, 287950 | ||
| Bug Blocks: | 284525 | ||
Antoine Quint
The demo https://codepen.io/t_afif/full/ZEgjNxm does not work perfectly: fewer generated animations.
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
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.