Bug 292328
| Summary: | [scroll-animations] various demos in https://kizu.dev/position-driven-styles/ don't work as expected | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Antoine Quint <graouts> |
| Component: | Animations | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW | ||
| Severity: | Normal | CC: | graouts, kizmarh, webkit-bug-importer |
| Priority: | P2 | Keywords: | InRadar |
| Version: | WebKit Nightly Build | ||
| Hardware: | Unspecified | ||
| OS: | Unspecified | ||
| Bug Depends on: | 289992 | ||
| Bug Blocks: | |||
Antoine Quint
The webpage https://kizu.dev/position-driven-styles/ has plenty of demos utilizing Scroll-driven Animations. Here how sections behave as of 294333@main:
✅ Linear Gradient
✅ Diagonal Gradient
✅ Distributing Anything: @property
⚠️ Staggered Animations: performance is inferior vs. Chrome
🛑 Controlling the Stacking: involves `sin()` which we may not support
🛑 Edge Detection: unstable layout
🛑 Adjusting Corners: unstable layout
🛑 Styling the First Line: unstable layout
⚠️ Site Header: performance is inferior vs. Chrome while resizing
🛑 Tabs: unstable layout
⚠️ Auto Margin And Flex Wrapping: performance is inferior vs. Chrome while resizing
We'll need to diagnose those individual issues and file dedicated bugs.
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Radar WebKit Bug Importer
<rdar://problem/150369164>
Antoine Quint
I also encountered a debug assertion in the CSS Grids code while debugging: https://bugs.webkit.org/show_bug.cgi?id=288819. This might prove problematic while debugging the other issues.
Antoine Quint
Roman, who authored this page, provided some useful information. He believes bug 289992 is the reason for "Controlling the Stacking" not working, so marking that bug as a blocker.
Antoine Quint
With the patch for bug 289992, the bulk of functional issues are gone! Here are the remaining issues:
⚠️ Site Header: performance is inferior vs. Chrome while resizing
🛑 Tabs: unstable layout
⚠️ Auto Margin And Flex Wrapping: performance is inferior vs. Chrome while resizing