Bug 208070 – REGRESSION (r251385): box-shadow interferes with backdrop-filter

• Status: RESOLVED
• Resolution: FIXED
• Component: Compositing

[Julian]

Created attachment 391420 [details]
backdrop-filter bug

When I use these CSS lines in Safari 13.0.5 on macOS 10.13.6 and Safari on iPadOS 13:

-webkit-backdrop-filter: saturate(180%) blur(20px);
background-color: rgba(229,229,229,.6);
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0,0,0,.2), inset 0 0 0 1px rgba(0,0,0,.05);

the backdrop-filter moves a little to the right (about 10px) and a little down (4px).
When I remove the box-shadow or the border-radius, the backdrop-filter looks normal.

I didn't have this problem in Safari 12.

[Radar WebKit Bug Importer]

<rdar://problem/59702253>

[Simon Fraser (smfr)]

<rdar://problem/59683152>

[Simon Fraser (smfr)]

Created attachment 394424 [details]
Patch

[Darin Adler]

Comment on attachment 394424 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=394424&action=review

> Source/WebCore/platform/graphics/ca/GraphicsLayerCA.cpp:2280
> +    auto backdropRectRelativeToBackdropLayer = m_backdropFiltersRect;
> +    backdropRectRelativeToBackdropLayer.setLocation({ });

How about this instead?

    auto backdropRectRelativeToBackdropLayer = FloatRect { { }, m_backdropFiltersRect.size() };

[Simon Fraser (smfr)]

Sure.

[Simon Fraser (smfr)]

(In reply to Simon Fraser (smfr) from comment #5)
> Sure.

Actually no, because this is a FloatRoundedRect.

[Simon Fraser (smfr)]

https://trac.webkit.org/changeset/258985/webkit

[Simon Fraser (smfr)]

*** Bug 163206 has been marked as a duplicate of this bug. ***

[Simon Fraser (smfr)]

*** Bug 201234 has been marked as a duplicate of this bug. ***

[Simon Fraser (smfr)]

*** Bug 211349 has been marked as a duplicate of this bug. ***