[Webkit-unassigned] [Bug 283942] New: Safari 18 regression: all: revert-layer is broken when CSS properties are inherited

[bugzilla-daemon at webkit.org]

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

            Bug ID: 283942
           Summary: Safari 18 regression: all: revert-layer is broken when
                    CSS properties are inherited
           Product: WebKit
           Version: WebKit Nightly Build
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: New Bugs
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: govett at adobe.com

This is related to a previous bug I reported: https://bugs.webkit.org/show_bug.cgi?id=280307. That reproduction is fixed in Safari 18.2 beta, but there is still another bug. If any property is inherited, it causes the element's layout to break when styles change.

Steps to reproduce:

1. Open https://codepen.io/devongovett/pen/emONqOL
2. Hover over the red box.

Expected behavior: The box should turn green.
Actual behavior: In Safari 18, the box loses its padding. This does not happen in Chrome or Firefox, or in Safari 17.

This appears to be related to a combination of `all: revert-layer` and CSS property inheritance. In this example, `border-radius: inherit` causes the issue, but it can happen with other inherited properties as well. The issue does not occur when either of those properties are removed.

This resulted in regressions to Adobe's component library, which relies on cascade layers. revert-layer is used to ensure external styles outside a layer do not apply. This worked correctly in previous versions of Safari, and works fine in Chrome and Firefox as well.

-- 
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/20241202/2ae56471/attachment-0001.htm>