Border radius clipping does not correctly disable for descendants when using `will-transform`

• Component: CSS
• Status: RESOLVED CONFIGURATION CHANGED

Live example here: https://jsfiddle.net/nxja91tc/4/

If there’s HTML like this:
<div id="outer">
<div id="inner">
</div>
</div>

With CSS like this:
div {
  width: 100px;
  height: 100px;  
}
#inner {
  background-color: blue;
  will-change: transform;
}
#outer {
  overflow: hidden;
  border-radius: 20px;
  background-color: red;
  will-change: transform;
}

Then disabling the border-radius of #outer (with JavaScript) to 0px will indeed disable the border radius, but only for #outer. The #inner div will stay clipped, causing red corners to show that should have been overlapped with blue.

[Radar WebKit Bug Importer]

<rdar://problem/33666350>

[Simon Fraser (smfr)]

We have a dup of this filed.

[Ahmad Saleem]

I am not able to reproduce this bug in Safari 16.6 and STP176 and both matches with Chrome Canary 118 and Firefox Nightly 118 on linked JSFiddle.

Marking this as "RESOLVED CONFIGURATION CHANGED".