Bug 312584 – REGRESSION (303819@main): Child with filter:blur() ignores border radius overflow clipping

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

Created attachment 479145 [details]
Reproduction with toggle to turn blur on/off

Overview:
CSS filter: blur() on a child element ignores `overflow: hidden` and `border-radius` on the parent container.

Steps to Reproduce:
1) Create a parent element with border-radius and overflow: hidden
2) Apply filter:blur() to a child element that fills the parent

Actual Results:
The blur effect causes the child to paint outside the parent's rounded clipping region. The border radius appears to have no effect while the blur is active.

Expected Results: 
The blurred child should be clipped to the parent's rounded corners, respecting overflow: hidden and border-radius.

Hardware:
MacOS 26.4.1

User-Agent: 
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.4 Safari/605.1.15

[Radar WebKit Bug Importer]

<rdar://problem/175519148>

[Karl Dubost]

Created attachment 479326 [details]
rendering in safari, firefox, chrome

It doesn't seem I can reproduce. Or maybe I do something wrong. 

Tested with Safari Technology Preview 242 
Firefox Nightly 151
Chrome Canary 148

Created attachment 479328 [details]
Safari 26.4 versus Technology Preview 242

Hey Karl, to reproduce you need to click the "Toggle blur" button to enable the `filter: blur(5px)` styling. The failure to clip the border radius only occurs when blurring is on.

That being said, I'm no longer seeing the bug in Safari Technology Preview 242! It is clipping the border radius as I would expect.

[Simon Fraser (smfr)]

Created attachment 479345 [details]
Static testcase

[Simon Fraser (smfr)]

This regressed somewhere in this range:  302000@main:305000@main

[Simon Fraser (smfr)]

Regressed at 303819@main, but that may have just revealed issues introduced in 296844@main.

[Simon Fraser (smfr)]

Replacing the filter with opacity (good rendering), the painting looks like:

            Save
                Clip (rect (58,50) width=300 height=300)
                BeginTransparencyLayer (opacity 0.80)
                    Save (background)
                        Clip (rect (58,50) width=300 height=300)
                        ClipRoundedRect (rect (58,50) width=300 height=300 (top-left width=50 height=50) (top-right width=50 height=50) (bottom-left width=50 height=50) (bottom-right width=50 height=50))
                        FillCompositedRect (rect (58,50) width=300 height=300) (color #0000FF) (op source-over) (blendMode normal)
                    Restore
                    Save (foreground)
                        Clip (rect (58,50) width=300 height=300)
                        ClipRoundedRect (rect (58,50) width=300 height=300 (top-left width=50 height=50) (top-right width=50 height=50) (bottom-left width=50 height=50) (bottom-right width=50 height=50))
                    Restore
                    Save (outline)
                        Clip (rect (58,50) width=300 height=300)
                        ClipRoundedRect (rect (58,50) width=300 height=300 (top-left width=50 height=50) (top-right width=50 height=50) (bottom-left width=50 height=50) (bottom-right width=50 height=50))
                    Restore
                EndTransparencyLayer
            Restore

With filters, it's

            Save
                Clip (rect (58,50) width=300 height=300)
                SetStyle (style  (radius width=9 height=9))
                BeginTransparencyLayer (opacity 1.00)
                    FillCompositedRect (rect (58,50) width=300 height=300) (color #0000FF) (op source-over) (blendMode normal)
                EndTransparencyLayer
            Restore

The inner layer doesn't get clipRect.affectedByRadius() set.

[Simon Fraser (smfr)]

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

[EWS]

Committed 312531@main (34213f695a38): <https://commits.webkit.org/312531@main>

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

[WebKit Commit Bot]

Re-opened since this is blocked by bug 314146

[Simon Fraser (smfr)]

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

[EWS]

Committed 313267@main (b8414eccb3b1): <https://commits.webkit.org/313267@main>

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