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

Description Martin 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.

Comment 1 Simon Fraser (smfr) 2020-05-04 09:36:45 PDT

Fixed; please test recent STP.

*** This bug has been marked as a duplicate of bug 208070 ***