Bug 252181

Summary: 3D transform causes backdrop-filter effect to be applied incorrectly
Product: WebKit Reporter: Ana Tudor <ana.tudor.lhnh>
Component: CompositingAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: bugs-noreply, dino, maggotfish, mattwoodrow, mcatanzaro, simon.fraser, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Other   
Hardware: Unspecified   
OS: Linux   
Attachments:
Description Flags
Comparison between correct result in Chrome and the result in Epiphany.
none
macOS screenshot
none
macOS Tahoe rendering none

Ana Tudor
Reported 2023-02-13 12:03:19 PST
Created attachment 464973 [details] Comparison between correct result in Chrome and the result in Epiphany. How to reproduce: set both a 3D transform and a backdrop-filter on an element. Live test: https://codepen.io/thebabydino/pen/oNMLELr Live test with plane intersection: https://codepen.io/thebabydino/pen/vYzBPgd I've only tested via Epiphany, but it's been confirmed it also happens in actual Safari - see replies with screenshots: https://twitter.com/anatudor/status/1609985403251216387 https://mastodon.social/@anatudor/109621114959498459 Perhaps also relevant/ somewhat related to this other bug https://bugs.webkit.org/show_bug.cgi?id=249952 Another demo which looks broken because of this https://www.cssscript.com/demo/glassmorphism-credit-card/ - this demo in particular only uses `backdrop-filter` without a prefix so you're not going to see any blur effect at first, but if you add the prefix via DevTools, you're going to see the blurred backdrop area is incorrect during the animation/ if you also add a `transform: rotate(45deg)` on the `.card` element.
Attachments
Comparison between correct result in Chrome and the result in Epiphany. (34.49 KB, image/png)
2023-02-13 12:03 PST, Ana Tudor 		no flags
Details
macOS screenshot (214.64 KB, image/png)
2023-10-12 13:16 PDT, Simon Fraser (smfr) 		no flags
Details
macOS Tahoe rendering (219.66 KB, image/png)
2025-09-06 19:50 PDT, Simon Fraser (smfr) 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Matt Woodrow
Comment 1 2023-02-14 17:18:18 PST
It looks like the second test case is a slightly different issue, the preserve-3d isn't applied because the child is a pseudo element. Filed https://bugs.webkit.org/show_bug.cgi?id=252277 for that issue.
Ana Tudor
Comment 2 2023-02-14 23:52:14 PST
Here's a test of the intersection with spans instead of pseudos https://codepen.io/thebabydino/pen/BaOaEbj And a cube-cube intersection test https://codepen.io/thebabydino/pen/XWProEq This last one is how I actually came across this problem, as I was trying to get the intersecting glassy cubes effect like https://www.pinterest.com/pin/432838214178310878/
Radar WebKit Bug Importer
Comment 3 2023-02-20 12:06:36 PST
<rdar://problem/105690050>
Michael Catanzaro
Comment 4 2023-10-12 05:22:24 PDT
If the bug happens in Safari too, then this shouldn't be assigned to WebKitGTK component. That reduces the chance of the right people looking.
Simon Fraser (smfr)
Comment 5 2023-10-12 13:16:18 PDT
Created attachment 468193 [details] macOS screenshot
Simon Fraser (smfr)
Comment 6 2025-09-06 19:50:37 PDT
Created attachment 476667 [details] macOS Tahoe rendering Tahoe rendering looks much improved, but the blur of the discs still looks a little off.
Note You need to log in before you can comment on or make changes to this bug.