RESOLVED FIXED 284527
[scroll-animations] https://scroll-driven-animations.style/demos/shrinking-header-shadow/css/ does not work 
https://bugs.webkit.org/show_bug.cgi?id=284527
Summary [scroll-animations] https://scroll-driven-animations.style/demos/shrinking-he...
Antoine Quint
Reported 2024-12-12 06:22:07 PST
The demo https://scroll-driven-animations.style/demos/shrinking-header-shadow/css/ does not work perfectly: there's an issue with text layout in the shrinking header.
Attachments
Reduction (230 bytes, text/html)
2025-04-29 10:05 PDT, Antoine Quint 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2024-12-12 06:22:20 PST
<rdar://problem/141356000>
Antoine Quint
Comment 2 2025-04-29 09:15:15 PDT
I think this might simply be a CSS Grid layout issue.
Antoine Quint
Comment 3 2025-04-29 09:18:47 PDT
Not sure what is causing the bug but it's definitely a CSS issue unrelated to scroll-driven animations. Going to reduce this. The application of margin in this rule differs in Chrome and STP: @layer demo @layer reset :is(header, main, footer) *, body { margin: 0; padding: 0; }
Antoine Quint
Comment 4 2025-04-29 09:31:17 PDT
Actually, it does seem to be animation-related, the `font-size` applied to `.info h2` resolves to `24px` in both Chrome and STP as a result of an animation, but renders differently.
Antoine Quint
Comment 5 2025-04-29 09:34:44 PDT
The computed margin on `.info h2` differs in Chrome and STP. It is set to 0 through CSS, but somehow we resolve it to ~20px in the y axis.
Antoine Quint
Comment 6 2025-04-29 10:05:14 PDT
Created attachment 475081 [details] Reduction I have a simple reduction, attached and reproduced below: ``` <style> @keyframes anim { from, to { font-size: 100px; } } h2 { margin: 0; background-color: lightblue; animation: anim both; } </style> <h2>Test</h2> ``` The margin should be computed to 0 but isn't.
Antoine Quint
Comment 7 2025-04-29 10:09:53 PDT
Over to CSS, probably good for Antti to take a look.
Antti Koivisto
Comment 8 2025-06-16 05:57:06 PDT
adding some borders make the issue more visual <style> @keyframes anim { from, to { font-size: 100px; } } h2 { margin: 0; background-color: lightblue; animation: anim both; } div { border: 2px solid green; } </style> <div> <h2>Test</h2> </div>
Antti Koivisto
Comment 9 2025-06-16 08:53:30 PDT
Pull request: https://github.com/WebKit/WebKit/pull/46808
EWS
Comment 10 2025-06-17 01:23:45 PDT
Committed 296304@main (3b8072782a83): <https://commits.webkit.org/296304@main> Reviewed commits have been landed. Closing PR #46808 and removing active labels.
Antti Koivisto
Comment 11 2025-06-17 01:42:39 PDT
Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/53207
Antoine Quint
Comment 12 2025-06-24 07:51:07 PDT
*** Bug 294902 has been marked as a duplicate of this bug. ***
Note You need to log in before you can comment on or make changes to this bug.