Bug 211349 - Blur backdrop-filter shows incorrectly for elements with border-radius
Summary: Blur backdrop-filter shows incorrectly for elements with border-radius
Status: RESOLVED DUPLICATE of bug 208070
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 13
Hardware: iPhone / iPad iOS 13
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2020-05-03 03:26 PDT by Martin
Modified: 2020-05-04 09:36 PDT (History)
4 users (show)

See Also:

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

Note You need to log in before you can comment on or make changes to this bug.
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 ***