NEW 201987
backdrop-filter is applied to child element when child uses transform which does not match Chrome 
https://bugs.webkit.org/show_bug.cgi?id=201987
Summary backdrop-filter is applied to child element when child uses transform which d...
Dennis Walsh
Reported 2019-09-19 09:39:38 PDT
Created attachment 379137 [details] Safari (left) vs Chrome (right) for codepen above Any child element of a `backdrop-filter` parent with `transform` has the `backdrop-filter` applied. Please see: https://codepen.io/LawJolla/pen/jONQrvR Example code <body> <div id="wrapper"> <img src="https://www.stickpng.com/assets/images/5b3b46b69357a48ff2188195.png" width="200px" /> <div id="title">Safari Backdrop Filter Bug</div> </div> </body> <style> #wrapper { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); position: relative; } #title { transform: rotateX(180deg); } img { transform: rotateX(180deg); } body { color: white; background: radial-gradient(black 15%, transparent 16%) 0 0, radial-gradient(black 15%, transparent 16%) 8px 8px, radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px, radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px; background-color:#282828; background-size:16px 16px; } </style> Thanks for the hard work!
Attachments
Safari (left) vs Chrome (right) for codepen above (242.51 KB, image/png)
2019-09-19 09:39 PDT, Dennis Walsh 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2019-09-20 13:26:10 PDT
<rdar://problem/55570075>
Dennis Walsh
Comment 2 2019-09-20 14:33:58 PDT
After further testing, the problem appears restricted to the `rotate` property of `transform`.
Simon Fraser (smfr)
Comment 3 2019-09-21 16:54:08 PDT
The title and description don't say what that actual bug is.
Dennis Walsh
Comment 4 2019-09-21 17:18:53 PDT
That's incorrect. The problem is clearly stated and demonstrated.
Note You need to log in before you can comment on or make changes to this bug.