[Webkit-unassigned] [Bug 252181] New: 3D transform causes backdrop-filter effect to be applied incorrectly
bugzilla-daemon at webkit.org
bugzilla-daemon at webkit.org
Mon Feb 13 12:03:19 PST 2023
https://bugs.webkit.org/show_bug.cgi?id=252181
Bug ID: 252181
Summary: 3D transform causes backdrop-filter effect to be
applied incorrectly
Product: WebKit
Version: Other
Hardware: Unspecified
OS: Linux
Status: NEW
Severity: Normal
Priority: P2
Component: CSS
Assignee: webkit-unassigned at lists.webkit.org
Reporter: ana.tudor.lhnh at gmail.com
Created attachment 464973
--> https://bugs.webkit.org/attachment.cgi?id=464973&action=review
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.
--
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20230213/0457dc34/attachment.htm>
More information about the webkit-unassigned
mailing list