Bug 158807

Summary: -webkit-backdrop-filter leaves artifacts on rounded borders
Product: WebKit Reporter: Asa Carter <asa_carter>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: RESOLVED DUPLICATE    
Severity: Major CC: dino, graouts, graouts, simon.fraser
Priority: P2    
Version: Safari 9   
Hardware: iPhone / iPad   
OS: iOS 9.3   
Attachments:
Description Flags
Preview of artifacts in iOS safari none

Asa Carter
Reported 2016-06-15 12:54:17 PDT
Created attachment 281383 [details] Preview of artifacts in iOS safari Issue: Using -webkit-backdrop-filter to create a background blur leaves artifacts around the edge of an element that has a border-radius. Removing the -webkit-backdrop-filter removes the artifacts. In addition, the blur is also used with a CSS fade animation in my example and the blur is not drawn until the animation has completed. Not sure if this is a bug? How to reproduce: Visit https://appifiny.co.uk/demo/ in Safari or Safari on iOS. Observe artifacts around each corner. Observe blur being visibly drawn after fade animation has completed. OS: OS X 10.11.5 Safari: 9.1.1 iOS: 10 Beta 1
Attachments
Preview of artifacts in iOS safari (1.49 MB, image/png)
2016-06-15 12:54 PDT, Asa Carter 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Antoine Quint
Comment 1 2016-06-15 18:30:36 PDT
This was fixed recently with https://bugs.webkit.org/show_bug.cgi?id=158483. *** This bug has been marked as a duplicate of bug 158483 ***
Note You need to log in before you can comment on or make changes to this bug.