Bug 258635 – Weird rendering bug in rendering of a rem unit provided through a custom property when two animations present

• Component: Animations
• Status: RESOLVED CONFIGURATION CHANGED

[Roman Komarov]

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.

[Karl Dubost]

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

[Karl Dubost]

```
@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

[Radar WebKit Bug Importer]

<rdar://problem/111802181>

[Ahmad Saleem]

I am not able to reproduce this bug using test case on Safari Technology Preview 227.

@Roman - can you try it on STP? If it works, we can close this bug.

[Roman Komarov]

Yep, I think this is fixed!