Bug 163206 – box-shadow rendered incorrectly when backdrop-filter is applied

• Status: RESOLVED
• Resolution: DUPLICATE
• Component: CSS

[Akash Rajendra]

Created attachment 291094 [details]
Screenshot of the "bug"

backdrop-filter causes fault in rendering the box-shadow

[Radar WebKit Bug Importer]

<rdar://problem/28754976>

[Steve]

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.

http://jsfiddle.net/gkmjh6xf

[Steve]

Created attachment 396253 [details]
the bug in action

Note the menu on top-right with the backdrop blur offset because of the box-shadow

[Hansol Kim]

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.

[Simon Fraser (smfr)]

Fixed. Please test in Safari Tech Preview 105.

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