Bug 285872

Summary: overflow:auto clips filters to border box
Product: WebKit Reporter: Alan Stearns <stearns>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: RESOLVED DUPLICATE    
Severity: Normal CC: bfulgham, karlcow, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari 17   
Hardware: Mac (Apple Silicon)   
OS: macOS 14   
Attachments:
Description Flags
webkit rendering on left, gecko on right none

Alan Stearns
Reported 2025-01-13 13:07:54 PST
Created attachment 473888 [details] webkit rendering on left, gecko on right This CSS creates a box with a red drop shadow, and renders the whole red rectangle in Blink and Gecko. Webkit clips the red rectangle to the border box div { height: 100px; width: 200px; border: 1px solid black; overflow: auto; filter: drop-shadow(10px 10px 1px red); } https://codepen.io/astearns/pen/xbKjgNb
Attachments
webkit rendering on left, gecko on right (40.34 KB, image/png)
2025-01-13 13:07 PST, Alan Stearns 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Alan Stearns
Comment 1 2025-01-13 13:24:13 PST
Adobe Express (and Spectrum Web Components) will likely be adding `transform: translate3d(0, 0, 0)` to things to work around this issue in Safari.
Radar WebKit Bug Importer
Comment 2 2025-01-14 13:05:15 PST
<rdar://problem/142904174>
Simon Fraser (smfr)
Comment 3 2025-06-05 16:37:57 PDT
*** This bug has been marked as a duplicate of bug 219520 ***
Note You need to log in before you can comment on or make changes to this bug.