Bug 292328 – [scroll-animations] various demos in https://kizu.dev/position-driven-styles/ don't work as expected

• Status: NEW
• Component: Animations

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

[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