Bug 205019

Summary: Backdrop filter not working with overflow: hidden on parent
Product: WebKit Reporter: M. P. <marcel_pi>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: RESOLVED DUPLICATE    
Severity: Normal CC: ahmad.saleem792, ap, bfulgham, crisscross.kaindl, dino, mattwoodrow, mmaxfield, simon.fraser, thorton, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: WebKit Nightly Build   
Hardware: Mac   
OS: macOS 10.13   
URL: https://codepen.io/marcel_pi/pen/VwYvmGv
Attachments:
Description Flags
Showcasing the bug.
none
Comparison between Firefox and Safari
none
Safari 15.6 and STP 151 differ from other browsers none

M. P.
Reported 2019-12-09 10:12:32 PST
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
Attachments
Showcasing the bug. (1.02 KB, text/html)
2019-12-09 10:12 PST, M. P. 		no flags
Details
Comparison between Firefox and Safari (430.54 KB, image/png)
2020-04-24 10:40 PDT, Christian Kaindl 		no flags
Details
Safari 15.6 and STP 151 differ from other browsers (1.98 MB, image/png)
2022-08-13 08:04 PDT, Ahmad Saleem 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2019-12-11 13:45:50 PST
<rdar://problem/57851764>
Alexey Proskuryakov
Comment 2 2019-12-11 13:48:15 PST
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.
Christian Kaindl
Comment 3 2020-04-24 10:40:26 PDT
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.
Simon Fraser (smfr)
Comment 4 2020-04-24 11:44:12 PDT
Maybe fixed by bug 208070. Please test STP 105.
Ahmad Saleem
Comment 5 2022-08-13 08:04:31 PDT
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!
Matt Woodrow
Comment 6 2023-09-19 17:24:42 PDT
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 ***
Note You need to log in before you can comment on or make changes to this bug.