1757017 - relative font-size (em, percent, inherit) in the keyframes animation of a pseudo-element do not measure the font-size relative to the element with the pseudo-element, but relative to its parent

Status: RESOLVED FIXED

(Core :: CSS Transitions and Animations, defect)

Description

[Maxim]

Attachment: testcase 1 (from reporter): Example of an html file that in desktop and mobile firefox displays different text than any other browser that I could find

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36 OPR/83.0.4254.46

Steps to reproduce:

added to the keyframes animation changing the font-size of the pseudo-element relative to its parent in em units.

Actual results:

font-size of the pseudo-element calculated incorrectly (relative to the parent) during animation.

Expected results:

font-size of the pseudo-element is calculated relative to the element with it.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Layout: Text and Fonts' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 2

[Daniel Holbert [:dholbert]]

Thanks for the bug report! This looks like a legit bug to me.

Importantly: we behave differently depending on whether the font-size is applied via an animation-that-sets-font-size, vs. via a direct font-size declaration, in the CSS ::after {} pseudo-class rule. That inconsistency seems definitely-wrong.

Also: this seems to affect percentage font-sizes and explicit font-size:inherit, according to my testing.

I'll attach an additional reduced testcase in a bit, to demonstrate the things I noted above. Also CC'ing some folks who know our CSS Animation code better than I do, who might have thoughts or cycles to investigate.

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: testcase 2: expected to display 5 equally-sized blue squares (each 5px tall and wide)

Here's a testcase to demonstrate our behavior a bit more.

It's got 5 boxes, all generated by ::after, with width and height of 1em (revealing the computed font-size on the pseudo-element via the size of the box).

The expectation is that all of the boxes should be the same size; they all reference the parent's font-size in one way or another.

(The first one references the parent's font-size implicitly i.e. by-default; the second one just redeclares the exact pixel value [kinda cheating]. These are both fine. And then the last 3 use font-size: 1em vs. 100% vs. inherit, all via animations. These last 3 all "fail" and end up with the wrong computed font-size.)

Comment 4

[Brian Birtles (:birtles)]

I believe the fact that we don't handle font-size in animations correctly is a known issue which we always anticipated fixing when we implement CSS Properties API (bug 1273706) since that introduces a more general case of the same problem.

Comment 5

[Daniel Holbert [:dholbert]]

Attachment: reference case 2

Here's a reference case for testcase 2, where I've simply replaced the animations with explicit declarations. i.e. I've replaced...

    @keyframes kf-fs1em { from, to { font-size: 1em; } }
    .fs1em::after {
        animation: kf-fs1em 1s infinite;
    }

...with:

    .fs1em::after {
        font-size: 1em;
    }

I think it's legit to expect these^ to produce the same result here, but they don't produce the same result.

Comment 6

[Daniel Holbert [:dholbert]]

Attachment: screenshot of testcase 2 (Firefox on the left, Chrome on the right)

Here's a screenshot showing us vs. Chrome on testcase 2.

(We agree with Chrome on how to render the reference case, which is also how Chrome renders the testcase.)

Comment 7

[Daniel Holbert [:dholbert]]

Looks like this was a regression from the "stylo" CSS Engine rewrite / import-from-servo.

mozregression gives me this range:
https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=f64e2b4dcf5eec0b4ad456c149680a67b7c26dc4&tochange=93dd2e456c0ecca00fb4d28744e88078a77deaf7

...which includes:
Bug 1330412 - Enable Stylo by default. r=bholley,froydnj
https://hg.mozilla.org/mozilla-central/rev/7b3215e184436b77de2204e57919d1c21286727f

Comment 8

[BugBot [:suhaib / :marco/ :calixte]]

Set release status flags based on info from the regressing bug 1330412

Comment 9

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1757017 - Make keyframes for pseudo-elements inherit from the right style. r=#style,#layout-reviewers

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/387276dda7b5
Make keyframes for pseudo-elements inherit from the right style. r=dholbert

Comment 11

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/33031 for changes under testing/web-platform/tests

Comment 12

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/387276dda7b5

Comment 13

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot