Created attachment 385164 [details] Showcasing the bug. I'm trying to use backdrop-filter(blur in this case) on a div only to discover the overflow: hidden property prevents it from applying. The browser is Chrome 78. Say I've got a div.filter inside a div.block that's wrapper inside a div.container. div.container > div.block > div.filter If I apply overflow: hidden to both .container and .block the effect of the filter suddenly disappears. Furthermore, other properties of the .block prevents the filter from being applied. Seems like the overflow: hidden on .container triggers this erratic behavior. Do you guys have any idea what's going on here? Demo here: https://codepen.io/marcel_pi/pen/VwYvmGv
<rdar://problem/57851764>
This is reported against Chrome, but it *seems* like it affects WebKit?.. Not sure how to tell fore sure, because there is no description of expected behavior.
Created attachment 397470 [details] Comparison between Firefox and Safari Here's a comparison between Safari's and Firefox' behavior, both rendering the original demo attachment. On the left is Firefox (with the `layout.css.backdrop-filter.enabled` flag set) and on the right is Safari.
Maybe fixed by bug 208070. Please test STP 105.
Created attachment 461577 [details] Safari 15.6 and STP 151 differ from other browsers I am able to reproduce this bug in Safari 15.6 and STP 151 as can be seen from attached screenshot compared to other browsers using attached test case. Thanks!
The test case here is using 'backdrop-filter', which isn't supported by Safari yet. Using '-webkit-backdrop-filter' results in correct rendering. Marking this as a duplicate of the bug to unprefix backdrop-filter. *** This bug has been marked as a duplicate of bug 224899 ***