284527 2024-12-12 06:22:07 -0800 [scroll-animations] https://scroll-driven-animations.style/demos/shrinking-header-shadow/css/ does not work 2025-06-24 07:51:07 -0700 1 1 1 Unclassified WebKit CSS WebKit Nightly Build Unspecified Unspecified RESOLVED FIXED https://github.com/web-platform-tests/wpt/pull/53207 InRadar P2 Normal --- 284525 1 graouts koivisto graouts koivisto webkit-bug-importer oldest_to_newest 2081124 0 graouts 2024-12-12 06:22:07 -0800 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. 2081125 1 webkit-bug-importer 2024-12-12 06:22:20 -0800 <rdar://problem/141356000> 2113935 2 graouts 2025-04-29 09:15:15 -0700 I think this might simply be a CSS Grid layout issue. 2113936 3 graouts 2025-04-29 09:18:47 -0700 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; } 2113944 4 graouts 2025-04-29 09:31:17 -0700 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. 2113946 5 graouts 2025-04-29 09:34:44 -0700 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. 2113959 6 475081 graouts 2025-04-29 10:05:14 -0700 Created attachment 475081 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. 2113960 7 graouts 2025-04-29 10:09:53 -0700 Over to CSS, probably good for Antti to take a look. 2123932 8 koivisto 2025-06-16 05:57:06 -0700 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> 2123963 9 koivisto 2025-06-16 08:53:30 -0700 Pull request: https://github.com/WebKit/WebKit/pull/46808 2124146 10 ews-feeder 2025-06-17 01:23:45 -0700 Committed 296304@main (3b8072782a83): <https://commits.webkit.org/296304@main> Reviewed commits have been landed. Closing PR #46808 and removing active labels. 2124154 11 koivisto 2025-06-17 01:42:39 -0700 Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/53207 2125488 12 graouts 2025-06-24 07:51:07 -0700 *** Bug 294902 has been marked as a duplicate of this bug. *** 475081 2025-04-29 10:05:14 -0700 2025-04-29 10:05:14 -0700 Reduction bug-284527.html text/html 230 graouts PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KPHN0eWxlPgoKQGtleWZyYW1lcyBhbmltIHsK ICAgIGZyb20sIHRvIHsgZm9udC1zaXplOiAxMDBweDsgfQp9CgpoMiB7CiAgICBtYXJnaW46IDA7 CiAgICBiYWNrZ3JvdW5kLWNvbG9yOiBsaWdodGJsdWU7CglhbmltYXRpb246IGFuaW0gYm90aDsK fQoKPC9zdHlsZT4KPC9oZWFkPgoKPGJvZHk+Cgk8aDI+VGVzdDwvaDI+CjwvYm9keT4KPC9odG1s Pgo=