1885554 - em unit not correctly resolved when used inside @keyframes

Status: NEW

(Core :: CSS Transitions and Animations, defect)

Description

[tobias.bengfort]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/115.0

Steps to reproduce:

When font-size is animated using @keyframes, em units used outside of the keyframes are computed against the animated font-size, but em units used inside the same keyframes are not. Example: https://codepen.io/xi-the-bashful/pen/oNOzKPL

Comment 1

[Daniel Holbert [:dholbert]]

Thanks for the bug report. Good/bad news, this doesn't seem to be a regression; I can reproduce the bug at least as far back as Nightly 2018-01-01 (version 59.0a1). (If I go another year back, the right border simply never appears.)

Boris/hiro, do you happen to know if we have a bug filed on this already?

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: reduced testcsae 1 (based on reporter's codepen) - expectation is for blue border to grow just like the red border does

Comment 3

[Boris Chiou [:boris]]

I cannot find a related bug for this in Bugzilla. Thanks for filing this bug.

Comment 4

[Hiroyuki Ikezoe (:hiro)]

If my memory was correct, the font size resolution happens while we parse/resolve the keyframes, i.e. while we are generating the CSS animation, and it was compliant with the spec. But things might have been changed.

Comment 5

[Brian Birtles (:birtles)]

I thought font size resolution was known not to be correct in some cases but we decided not to fix it until we implemented custom property animations because both custom properties and font sizes would require some sort of cyclic dependency detection (or at least very careful ordering of evaluation) and we figured it would be easiest to fix it properly all at once.

Comment 6

[Brian Birtles (:birtles)]

(In reply to Brian Birtles (:birtles, Feb 26~ parental leave) from comment #5)

...both custom properties and font sizes would require some sort of cyclic dependency detection (or at least very careful ordering of evaluation)

Cycle detection might not be the right concept here. I just recall talking to the chromium engineer who implemented animation of custom properties in Blink and he mentioned that getting the dependency chain was involved. I'm not sure if you need to build up a graph of dependencies or not but I got the impression there was a bit of complexity there.