RESOLVED CONFIGURATION CHANGED 168418
backdrop-filter ignores parent border-radius, even with overflow: hidden 
https://bugs.webkit.org/show_bug.cgi?id=168418
Summary backdrop-filter ignores parent border-radius, even with overflow: hidden
Brian Valente
Reported 2017-02-16 03:09:34 PST
Created attachment 301731 [details] Screenshots inspecting the elements In this case, I'm trying to display an image with an "EDIT" span on it with width:100%. Both elements (img, span) are inside of a container with border-radius. If I set a semi-transparent background to the span (rgba(255, 255, 255, .5)) the span stays inside of the container and works well. But if I add a blur or saturation effect with -webkit-backdrop-filter the element ignores the border-radius of the parent, goes out of it. A live version can be found here: https://brianvalente.tk/webkit-bug.html
Attachments
Screenshots inspecting the elements (6.63 MB, image/png)
2017-02-16 03:09 PST, Brian Valente 		no flags
Details
test case 2 (863 bytes, text/html)
2022-08-15 17:16 PDT, Fujii Hironori 		no flags
Details
Safari 15.6 differs from other browsers (2.04 MB, image/png)
2022-08-15 23:41 PDT, Ahmad Saleem 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2017-02-18 10:47:31 PST
<rdar://problem/30592490>
Antoine Quint
Comment 2 2017-02-20 01:21:15 PST
I can reproduce this on ToT.
Ahmad Saleem
Comment 3 2022-08-13 08:13:20 PDT
Comment 0 test case URL is dead and I tried to look it in "Wayback Archive" but there was nothing and Comment 02 suggests that it was not reproducible in Webkit Top of Tree / Trunk (ToT), so I am going to mark this as "RESOLVED CONFIGURATION CHANGED", if it is reproducible, please reopen and share updated reproducible test case link and I am happy to test. Thanks!
Fujii Hironori
Comment 4 2022-08-15 17:16:06 PDT
Created attachment 461653 [details] test case 2 I created another test case.
Fujii Hironori
Comment 5 2022-08-15 17:16:55 PDT
I think this is still reproducible.
Ahmad Saleem
Comment 6 2022-08-15 23:41:56 PDT
Created attachment 461664 [details] Safari 15.6 differs from other browsers Thanks @Fuji. I am able to reproduce this with latest test case named "test case 2" and please refer to attached screenshot to see how all browsers render this. Thanks!
Matt Woodrow
Comment 7 2023-09-19 17:27:48 PDT
This appears to work correctly now in the Safari 17 beta.
Note You need to log in before you can comment on or make changes to this bug.