Created attachment 466853 [details] HTML page with the reproducible code (exported from CodePen) 1. Open https://codepen.io/kizu/pen/qBQrowd?editors=1100 or the attached test.html file 2. See how `rem` unit that comes from a CSS custom property is rendered as 1px. This only happens in WebKit, I could not reproduce this in Chrome or Firefox. I encountered this when investingating how my examples in my new article (for example, https://kizu.dev/position-driven-styles/#diagonal-gradient) did degrade in browsers that did not support scroll-driven animations. In Safari some examples did completely lose their height, which led me to trying to reproduce this in a minimal setup. The minimal setup that I did end up with, as seen on the CodePen/test.html is such: 1. We need to animations: one that applies a custom property, another that applies an animatable property like background. 2. Those animations should have a specific combination of animation-fill-mode, and at least one of them should have animation-direction: reverse. 3. We need to access the value in `rem` through a custom property. With all these conditions in place, the `1rem` renders as `1px` for me.
Created attachment 466862 [details] rendering in safari, firefox, chrome Safari Technology Preview 173 19616.1.20.2 Firefox Nightly 116.0a1 11623.6.28 Google Chrome Canary 117.0.5859.0 5859.0
``` @keyframes with-bg { from { background: pink; } } @keyframes with-variable { from { --foo: initial; } } .item { --height: 2rem; height: var(--height); animation: with-bg reverse forwards, with-variable forwards; } ``` 2em, 2ex are working but not 2rem
<rdar://problem/111802181>