Bug 194749 - Relative font size values (em) within CSS animations compound
Summary: Relative font size values (em) within CSS animations compound
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Animations (show other bugs)
Version: Safari 12
Hardware: All All
: P2 Critical
Assignee: Nobody
URL: https://codepen.io/scottkellum/pen/7c...
Keywords: InRadar
Depends on:
Reported: 2019-02-16 14:05 PST by Scott Kellum
Modified: 2019-11-11 19:27 PST (History)
8 users (show)

See Also:


Note You need to log in before you can comment on or make changes to this bug.
Description Scott Kellum 2019-02-16 14:05:18 PST
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.
Comment 1 Scott Kellum 2019-02-16 14:11:08 PST
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.
Comment 2 Scott Kellum 2019-02-17 13:29:05 PST
Possibly related bug: https://bugs.webkit.org/show_bug.cgi?id=194765
Comment 3 Simon Fraser (smfr) 2019-02-18 11:34:15 PST
Different bug. This one reproduces without Web Animations enabled. We're not resolving 'em' styles correctly in animation keyframes.
Comment 4 Radar WebKit Bug Importer 2019-02-18 11:34:35 PST
Comment 5 Kevin Lorenz 2019-04-02 06:35:38 PDT
This has already caused a lot of frustration on my end. Typo centered layout design is dependent on this to work correctly :(