Bug 194749 – Relative font size values (em) within CSS animations compound

• Status: RESOLVED
• Resolution: FIXED
• Component: Animations

[Scott Kellum]

If the font size is set in `em` and the font size within the keyframes of an animation are set in `em` then the values will compound instead of interpolating.

Here is an example: https://codepen.io/scottkellum/pen/7c4e82c2744e9dfc0caf706bc525d83f

Behavior in Safari 12 (iOS and Desktop): the text grows and shrinks.

Expected behavior: the animation is between 2em and 2em so it should do nothing. No change in size should occur.

[Scott Kellum]

Note on importance: This is a blocker/critical for me because I’m building a fluid typesetting system on top of animations and users want to set text in ems, preventing easy integrations into some websites.

[Scott Kellum]

Possibly related bug: https://bugs.webkit.org/show_bug.cgi?id=194765

[Simon Fraser (smfr)]

Different bug. This one reproduces without Web Animations enabled. We're not resolving 'em' styles correctly in animation keyframes.

[Radar WebKit Bug Importer]

<rdar://problem/48171898>

[Kevin Lorenz]

This has already caused a lot of frustration on my end. Typo centered layout design is dependent on this to work correctly :(

[Antti Koivisto]

Created attachment 401543 [details]
patch

[Antti Koivisto]

Created attachment 401544 [details]
patch

[Antoine Quint]

Sooo many new WPT PASS results!

[Antti Koivisto]

Created attachment 401635 [details]
patch

[Antti Koivisto]

Created attachment 401640 [details]
patch

[Antti Koivisto]

Created attachment 401720 [details]
patch

[Antti Koivisto]

Created attachment 401721 [details]
patch

[Antoine Quint]

Comment on attachment 401721 [details]
patch

View in context: https://bugs.webkit.org/attachment.cgi?id=401721&action=review

> LayoutTests/animations/keyframe-em-unit.html:5
> +div {
> +  font-size: 2em;
> +  animation: div 3s infinite alternate;
> +}

You can make the duration any value and add `freeze` to ensure the animated style will override the base style. You can remove `alternate` for sure.

> Source/WebCore/style/StyleTreeResolver.cpp:324
> +                // FIXME: Remove this hack and pass the parent style via updateCSSAnimationsForElement.

Can you file a bug and assign it to me to do this refactor?

[EWS]

Committed r262946: <https://trac.webkit.org/changeset/262946>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 401721 [details].