[Webkit-unassigned] [Bug 258635] New: Weird rendering bug in rendering of a rem unit provided through a custom property when two animations present

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=258635

            Bug ID: 258635
           Summary: Weird rendering bug in rendering of a rem unit
                    provided through a custom property when two animations
                    present
           Product: WebKit
           Version: Safari 16
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Animations
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: kizmarh at ya.ru
                CC: dino at apple.com, graouts at apple.com

Created attachment 466853

  --> https://bugs.webkit.org/attachment.cgi?id=466853&action=review

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.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20230628/95e98441/attachment.htm>