Bug 258635

Summary:

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

Product:

WebKit

Reporter:

Roman Komarov <kizmarh>

Component:

Animations

Assignee:

Nobody <webkit-unassigned>

Status:

NEW ---

Severity:

Normal

CC:

dino, graouts, karlcow, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

BrowserCompat, InRadar

Version:

Safari 16

Hardware:

Unspecified

OS:

Unspecified

Attachments:

Description	Flags
HTML page with the reproducible code (exported from CodePen)	none
rendering in safari, firefox, chrome	none

Description Roman Komarov 2023-06-28 12:17:40 PDT

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.

Comment 1 Karl Dubost 2023-06-29 00:41:24 PDT

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

Comment 2 Karl Dubost 2023-06-29 00:55:30 PDT

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

Comment 3 Radar WebKit Bug Importer 2023-07-05 12:18:16 PDT

<rdar://problem/111802181>