Bug 211349

Summary:

Blur backdrop-filter shows incorrectly for elements with border-radius

Product:

WebKit

Reporter:

Martin <martiminchev>

Component:

Layout and Rendering

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED DUPLICATE

Severity:

Normal

CC:

bfulgham, martiminchev, simon.fraser, zalan

Priority:

Version:

Safari 13

Hardware:

iPhone / iPad

OS:

iOS 13

Attachments:

Description	Flags
Glitched blurred elements - highlighted with red arrows	none

Martin

Reported 2020-05-03 03:26:10 PDT

Created attachment 398309 [details] Glitched blurred elements - highlighted with red arrows If an element has -webkit-backdrop-filter:blur(...) applied while also having a border-radius, the blur is not applied correctly - it does not cover the whole element, and sometimes it also goes outside of the element's radius bounds. Example URL with the issue: https://flyinthehead.org/current_buzz/ (note: for the bottom menu to appear, the device's width has to be <850px) I have attached screenshots with 2 different blur defects depending on the menu element. Tested on iPadOS 13.4.1 and iPhone.

Attachments
Glitched blurred elements - highlighted with red arrows (129.60 KB, image/png) 2020-05-03 03:26 PDT, Martin	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Simon Fraser (smfr)

Comment 1 2020-05-04 09:36:45 PDT

Fixed; please test recent STP. *** This bug has been marked as a duplicate of bug 208070 ***

Note You need to log in before you can comment on or make changes to this bug.