Bug 208070 - REGRESSION (r251385): box-shadow interferes with backdrop-filter
Summary: REGRESSION (r251385): box-shadow interferes with backdrop-filter
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Compositing (show other bugs)
Version: Safari 13
Hardware: Mac macOS 10.13
: P2 Normal
Assignee: Simon Fraser (smfr)
URL:
Keywords: InRadar
: 163206 201234 211349 (view as bug list)
Depends on:
Blocks:
 
Reported: 2020-02-21 12:08 PST by Julian
Modified: 2020-05-04 09:36 PDT (History)
7 users (show)

See Also:


Attachments
backdrop-filter bug (25.78 KB, image/png)
2020-02-21 12:08 PST, Julian
no flags Details
Patch (4.79 KB, patch)
2020-03-24 15:29 PDT, Simon Fraser (smfr)
dino: review+
Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Julian 2020-02-21 12:08:33 PST
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.
Comment 1 Radar WebKit Bug Importer 2020-02-22 17:46:37 PST
<rdar://problem/59702253>
Comment 2 Simon Fraser (smfr) 2020-02-24 10:56:28 PST
<rdar://problem/59683152>
Comment 3 Simon Fraser (smfr) 2020-03-24 15:29:20 PDT
Created attachment 394424 [details]
Patch
Comment 4 Darin Adler 2020-03-24 15:36:00 PDT
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() };
Comment 5 Simon Fraser (smfr) 2020-03-24 15:38:21 PDT
Sure.
Comment 6 Simon Fraser (smfr) 2020-03-25 09:07:41 PDT
(In reply to Simon Fraser (smfr) from comment #5)
> Sure.

Actually no, because this is a FloatRoundedRect.
Comment 7 Simon Fraser (smfr) 2020-03-25 09:52:54 PDT
https://trac.webkit.org/changeset/258985/webkit
Comment 8 Simon Fraser (smfr) 2020-04-24 09:28:55 PDT
*** Bug 163206 has been marked as a duplicate of this bug. ***
Comment 9 Simon Fraser (smfr) 2020-04-24 11:41:48 PDT
*** Bug 201234 has been marked as a duplicate of this bug. ***
Comment 10 Simon Fraser (smfr) 2020-05-04 09:36:45 PDT
*** Bug 211349 has been marked as a duplicate of this bug. ***