Bug 163206 - box-shadow rendered incorrectly when backdrop-filter is applied
Summary: box-shadow rendered incorrectly when backdrop-filter is applied
Status: RESOLVED DUPLICATE of bug 208070
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: WebKit Local Build
Hardware: PC Linux
: P2 Normal
Assignee: Nobody
Keywords: InRadar
Depends on:
Reported: 2016-10-10 05:38 PDT by Akash Rajendra
Modified: 2020-04-24 09:28 PDT (History)
7 users (show)

See Also:

Screenshot of the "bug" (1.01 MB, image/png)
2016-10-10 05:38 PDT, Akash Rajendra
no flags Details
the bug in action (1.44 MB, image/png)
2020-04-12 20:42 PDT, Steve
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Akash Rajendra 2016-10-10 05:38:12 PDT
Created attachment 291094 [details]
Screenshot of the "bug"

backdrop-filter causes fault in rendering the box-shadow
Comment 1 Radar WebKit Bug Importer 2016-10-13 08:37:06 PDT
Comment 2 Steve 2020-04-12 20:40:55 PDT
I don’t know if proper etiquette is to file new bugs but I think this is the same one. I filed with Feedback Assistant too but this is probably a better place.

This probably didn’t get traction because it was filed against PC but as of iOS 13 this has crept into Apple products too, or at least does on my XS Max and iPad Pro 11, macOS Safari and older iPhones work as expected. I could work around it prior to 13.4 through various css chicanery (like using px instead of em for widths, and no padding applied to the same element) but couldn’t get a simplified test case to fail. With 13.4 I can’t work around it but the test I made gets broken too so progress? This fiddle shows the bug in action, I’ll attach an image as well.

Comment 3 Steve 2020-04-12 20:42:58 PDT
Created attachment 396253 [details]
the bug in action

Note the menu on top-right with the backdrop blur offset because of the box-shadow
Comment 4 Hansol Kim 2020-04-24 07:53:32 PDT
I could reproduce the same visual glitch on both iOS/macOS Safari. Seems to have affected both Safari versions on iOS/macOS since updating to iOS 13.4 / macOS 10.15.4 recently. 

Not sure if it's the same issue that existed 4 years ago and if somehow it came back, but in the current issue it seems more in the side of 'backdrop-filter' being affected (incorrectly rendered) when 'box-shadow' property is present on the same element at the same time.

Here's a more comprehensive investigation / test case I made: https://codepen.io/zvuc/pen/abvJWee

More weird things seem to happen in a more complex environment, with multiple nested elements, animations, transitions and transforms... and in such cases similar rendering bug occurs intermittently even when removing all visible box-shadows. It may be a more fundamental redering issue. One thing for sure is that this problem did not exist at all in the previous version.
Comment 5 Simon Fraser (smfr) 2020-04-24 09:28:55 PDT
Fixed. Please test in Safari Tech Preview 105.

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