Bug 284527 – [scroll-animations] https://scroll-driven-animations.style/demos/shrinking-header-shadow/css/ does not work

• Component: CSS
• Status: RESOLVED FIXED

[Antoine Quint]

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.

[Radar WebKit Bug Importer]

<rdar://problem/141356000>

[Antoine Quint]

I think this might simply be a CSS Grid layout issue.

[Antoine Quint]

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]

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]

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]

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]

Over to CSS, probably good for Antti to take a look.

[Antti Koivisto]

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]

Pull request: https://github.com/WebKit/WebKit/pull/46808

[EWS]

Committed 296304@main (3b8072782a83): <https://commits.webkit.org/296304@main>

Reviewed commits have been landed. Closing PR #46808 and removing active labels.

[Antti Koivisto]

Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/53207

[Antoine Quint]

*** Bug 294902 has been marked as a duplicate of this bug. ***