Bug 313665

Summary: REGRESSION (296844@main): drop-shadow and translation transforms render incorrectly clipped
Product: WebKit Reporter: Jonathan Deutsch <jonathan>
Component: Layout and RenderingAssignee: Simon Fraser (smfr) <simon.fraser>
Status: RESOLVED FIXED    
Severity: Normal CC: ahmad.saleem792, bfulgham, jonathan, karlcow, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari 26   
Hardware: Unspecified   
OS: macOS 15   
See Also: https://bugs.webkit.org/show_bug.cgi?id=312584
https://bugs.webkit.org/show_bug.cgi?id=219520
Attachments:
Description Flags
Reproduction document
none
How it should look (older version of Safari)
none
How the bug looks on Safari 26.5
none
different result for 18.6 none

Jonathan Deutsch
Reported 2026-04-29 11:27:37 PDT
Created attachment 479377 [details] Reproduction document The drop-shadow filter and a transform:translate() on a div can result in in a nested div being clipped if it also uses a transform:translate(). Please see this basic example: ``` <div style="filter: drop-shadow(black 0px 0px 5px); transform: translateX(48px) translateY(36px); width: 40px; height: 40px;"> <div style="position: absolute;"> <div style="background-color:cyan; border-radius: 50%; width: 142px; height: 142px; transform: translateX(-50px) translateY(-50px);"></div> </div> </div> ``` Attached as bug.html. I also attached screenshots. This works correctly on Safari Version 18.6 (20621.3.11.11.3) on macOS 15.6. This works correctly on the latest Chrome/Firefox. This is a bug on at least Safari Version 26.5 (20624.2.4.18.2) on macOS 15.7.7 (24G716). It was reported to us as early as Jan 12, 2026 on macOS 14.8.3, but I did not have the Safari version or repro steps back then. But it seems likely this was a Safari 26 regression at some point. This affects users of Tumult Hype https://tumult.com/hype/.
Attachments
Reproduction document (322 bytes, text/html)
2026-04-29 11:27 PDT, Jonathan Deutsch 		no flags
Details
How it should look (older version of Safari) (119.39 KB, image/png)
2026-04-29 11:28 PDT, Jonathan Deutsch 		no flags
Details
How the bug looks on Safari 26.5 (194.94 KB, image/png)
2026-04-29 11:28 PDT, Jonathan Deutsch 		no flags
Details
different result for 18.6 (68.83 KB, image/png)
2026-04-30 15:25 PDT, Alexey Proskuryakov 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Jonathan Deutsch
Comment 1 2026-04-29 11:28:31 PDT
Created attachment 479378 [details] How it should look (older version of Safari)
Jonathan Deutsch
Comment 2 2026-04-29 11:28:51 PDT
Created attachment 479379 [details] How the bug looks on Safari 26.5
Jonathan Deutsch
Comment 3 2026-04-29 11:36:07 PDT
This reproduces in the Safari Technology Preview Release 242 (WebKit 20625.1.13.19.1) and the latest nightly 312297@main.
Radar WebKit Bug Importer
Comment 4 2026-04-29 19:30:25 PDT
<rdar://problem/175905543>
Ahmad Saleem
Comment 5 2026-04-29 19:31:04 PDT
Broken on Safari 26.4 as well.
Alexey Proskuryakov
Comment 6 2026-04-30 15:25:56 PDT
Created attachment 479404 [details] different result for 18.6 Curiously, I'm getting a different yet result using Safari 18.6 on macOS 15.6.
Alexey Proskuryakov
Comment 7 2026-04-30 15:29:12 PDT
Confirmed that the extra clipping started with Safari 26 though.
Simon Fraser (smfr)
Comment 8 2026-04-30 15:39:02 PDT
Possibly the same as bug 312584.
Simon Fraser (smfr)
Comment 9 2026-05-14 16:38:22 PDT
No, this is a different issue.
Simon Fraser (smfr)
Comment 10 2026-05-14 17:20:28 PDT
Caused by https://commits.webkit.org/296844@main
Simon Fraser (smfr)
Comment 11 2026-05-14 18:38:24 PDT
Pull request: https://github.com/WebKit/WebKit/pull/64966
EWS
Comment 12 2026-05-15 11:11:59 PDT
Committed 313316@main (42cae1dc020a): <https://commits.webkit.org/313316@main> Reviewed commits have been landed. Closing PR #64966 and removing active labels.
Note You need to log in before you can comment on or make changes to this bug.