Bug 168418

Summary:

backdrop-filter ignores parent border-radius, even with overflow: hidden

Product:

WebKit

Reporter:

Brian Valente <briannvalente>

Component:

Compositing

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED CONFIGURATION CHANGED

Severity:

Normal

CC:

ahmad.saleem792, ap, bfulgham, dino, fujii.hironori, graouts, mattwoodrow, sabouhallawa, simon.fraser, the.bull, webkit-bug-importer, zalan

Priority:

Keywords:

InRadar

Version:

WebKit Nightly Build

Hardware:

Mac

OS:

macOS 10.12

Attachments:

Description	Flags
Screenshots inspecting the elements	none
test case 2	none
Safari 15.6 differs from other browsers	none

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.