Bug 300477 – REGRESSION (299603@main): Inset box-shadow not rendered when spread is larger than element

• Status: RESOLVED
• Resolution: FIXED
• Component: Layout and Rendering

[Cameron Moon (cmrn)]

Created attachment 477036 [details]
Screenshot of Safari TP 229 vs Safari 26.0.1

If an element has an inset-box shadow where the box-shadow-spread radius is equal to or larger than half the element's width or height, the shadow will not render.

For example: 
```
<div
  style="
    width: 50px;
    height: 50px;
    background: pink;
    box-shadow: inset 0 0 0 25px purple;
  "
></div>
```

The above div is purple on Safari 26.0.1, but pink on Safari TP 229.

Minimal reproduction: https://codesandbox.io/p/sandbox/fdhxc5

This regression has been observed in Safari Technology Preview 229 (WebKit 20623.1.9.1) as well as iOS 26.1 beta 2.

[Cameron Moon (cmrn)]

Created attachment 477039 [details]
Minimal reproduction

[Simon Fraser (smfr)]

I fixed a variant of this via bug 298341, but apparently didn't fix it completely.

[Radar WebKit Bug Importer]

<rdar://problem/162373297>

[Cameron Moon (cmrn)]

Thanks Simon. Yeah I saw that other bug which seemed related - I wondered if maybe that fix surfaced this bug?

For context, at Canva this caused all our checkboxes to appear unchecked (since we used box-shadow as a fill). We've added a workaround in our first party code (using background-color instead), but third party apps in Canva are still affected.

Keen to hear any progress - it would be great to get a fix in before iOS 26.1 is released to avoid a regression in a stable release.

[alan]

Created attachment 477121 [details]
[fast-cq]Patch

[EWS]

Committed 301741@main (8b5fe77dc02b): <https://commits.webkit.org/301741@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 477121 [details].