Bug 283942 – Safari 18 regression: revert-layer is broken when logical group CSS properties are explicitly inherited

• Status: RESOLVED
• Resolution: FIXED
• Component: CSS

[Devon Govett]

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.

[Radar WebKit Bug Importer]

<rdar://problem/140819138>

[Antti Koivisto]

Reduced to just revert-layer a single property

<style>
@layer a {
  .outer {
    background: red;
  }

  .inner {
    padding-top: 24px;
    /* Without this line it works correctly. */
    top: inherit;
  }

  .outer:hover {
    background: green;
  }
}

.inner {
  /* Without this line it works correctly. */
  padding-top: revert-layer;
}
</style>
<div class="outer">
  <div class="inner">
    Test
  </div>
</div>
<p>If you hover over the above element and the box loses its padding, the test fails. If only the background color changes, it passes.</p>

[Antti Koivisto]

Pull request: https://github.com/WebKit/WebKit/pull/39319

[EWS]

Committed 289183@main (b7426636d878): <https://commits.webkit.org/289183@main>

Reviewed commits have been landed. Closing PR #39319 and removing active labels.