Bug 168418 - backdrop-filter ignores parent border-radius, even with overflow: hidden
Summary: backdrop-filter ignores parent border-radius, even with overflow: hidden
Status: RESOLVED CONFIGURATION CHANGED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Compositing (show other bugs)
Version: WebKit Nightly Build
Hardware: Mac macOS 10.12
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2017-02-16 03:09 PST by Brian Valente
Modified: 2023-09-19 17:27 PDT (History)
12 users (show)

See Also:

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 an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Brian Valente 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
Comment 1 Radar WebKit Bug Importer 2017-02-18 10:47:31 PST 
<rdar://problem/30592490>
Comment 2 Antoine Quint 2017-02-20 01:21:15 PST 
I can reproduce this on ToT.
Comment 3 Ahmad Saleem 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!
Comment 4 Fujii Hironori 2022-08-15 17:16:06 PDT 
Created attachment 461653 [details]
test case 2

I created another test case.
Comment 5 Fujii Hironori 2022-08-15 17:16:55 PDT 
I think this is still reproducible.
Comment 6 Ahmad Saleem 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!
Comment 7 Matt Woodrow 2023-09-19 17:27:48 PDT 
This appears to work correctly now in the Safari 17 beta.