Bug 207586 - CSS style 'filter: drop-shadow...' does not render correctly without repaint.
Summary: CSS style 'filter: drop-shadow...' does not render correctly without repaint.
Status: ASSIGNED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 13
Hardware: Mac macOS 10.15
: P2 Normal
Assignee: Simon Fraser (smfr)
URL:
Keywords: BrowserCompat, InRadar
: 234639 245773 (view as bug list)
Depends on:
Blocks:
 
Reported: 2020-02-11 14:38 PST by Drew McMurry
Modified: 2024-01-16 23:54 PST (History)
17 users (show)

See Also:


Attachments
Animated gif showing the issue. (1.24 MB, image/gif)
2020-02-11 14:38 PST, Drew McMurry
no flags Details
Patch (12.58 KB, patch)
2022-03-07 10:01 PST, Simon Fraser (smfr)
ews-feeder: commit-queue-
Details | Formatted Diff | Diff
Patch (16.28 KB, patch)
2022-03-07 11:58 PST, Simon Fraser (smfr)
zalan: review+
ews-feeder: commit-queue-
Details | Formatted Diff | Diff
Patch (19.33 KB, patch)
2022-03-14 15:02 PDT, Simon Fraser (smfr)
ews-feeder: commit-queue-
Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Drew McMurry 2020-02-11 14:38:22 PST
Created attachment 390427 [details]
Animated gif showing the issue.

the CSS style 'filter: drop-shadow...' does not render properly. On page load, the styles load and are applied as expected, but as we toggle visibility (this also happens when toggling display none/block), the drop-shadow effect isn't applied until you scroll or resize the window. To be specific, as you toggle the visibility on, there is no drop-shadow until you scroll or resize; as you toggle visibility off, the shadow remains until you scroll or resize.

Please see the issue here:
https://codepen.io/anon/pen/gNXvQX

Safari 12.0 - No Issue
Safari 12.1.1 - Broken
Safari 12.1.2 - Fixed
Safari 13.0.5 - Broken
Comment 1 Radar WebKit Bug Importer 2020-02-13 11:18:17 PST
<rdar://problem/59430460>
Comment 2 Simon Fraser (smfr) 2022-03-03 21:29:32 PST
*** Bug 234639 has been marked as a duplicate of this bug. ***
Comment 3 Simon Fraser (smfr) 2022-03-04 08:33:48 PST

*** This bug has been marked as a duplicate of bug 202472 ***
Comment 4 Simon Fraser (smfr) 2022-03-04 13:37:03 PST
Reopening to track the non-transition repaint issues with drop-shadow.
Comment 5 Simon Fraser (smfr) 2022-03-07 10:01:03 PST
Created attachment 453998 [details]
Patch
Comment 6 Simon Fraser (smfr) 2022-03-07 11:58:44 PST
Created attachment 454007 [details]
Patch
Comment 7 zalan 2022-03-07 15:34:19 PST
Comment on attachment 454007 [details]
Patch

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

> Source/WebCore/rendering/RenderBox.cpp:4998
> +        overflowMinX = std::min(overflowMinX, borderBox.x() - ((!isFlipped || isHorizontal) ? filterOutsets.left() : filterOutsets.right()));

"!isFlipped || isHorizontal" is a bit odd as horizontal could be flipped too (horizontal-bt, though I don't think any language uses it)so this essentially only flips for vertical writing mode.
Comment 8 Simon Fraser (smfr) 2022-03-14 15:02:08 PDT
Created attachment 454625 [details]
Patch
Comment 9 Simon Fraser (smfr) 2022-09-10 18:43:53 PDT
Affects these tests:

css3/filters/effect-combined-hw.html
css3/filters/effect-drop-shadow-hw.html
css3/filters/effect-drop-shadow.html
Comment 10 Miguel Gomez 2022-09-29 07:54:20 PDT
*** Bug 245773 has been marked as a duplicate of this bug. ***
Comment 11 Miguel Gomez 2022-09-29 07:57:56 PDT
Folks, what's the plan for this bug? I've tested the patch and it seems to work properly. The new tests fail on the bots cause they are missing expectations for those platforms (as you already know). Is this going to be committed? or is it breaking something that's not mentioned here?
Comment 12 Miguel Gomez 2022-09-29 07:58:51 PDT
(In reply to Miguel Gomez from comment #11)
> Folks, what's the plan for this bug? I've tested the patch and it seems to
> work properly. The new tests fail on the bots cause they are missing
> expectations for those platforms (as you already know). Is this going to be
> committed? or is it breaking something that's not mentioned here?

Also, anything I can do to help?
Comment 13 Miguel Gomez 2022-10-11 07:33:51 PDT
Folks, I was playing with the patch provided here, and I found a case where this doesn't seem to fix the wrong rendering. I've tested that the rendering is not correct even on macOS Safari 15.4. The test is this:

https://certification.bbctvapps.co.uk/act/test/ui/187/css-supports-shadows/

The image should have a drop-shadow filter that's not properly rendered. On GTK and WPE it's not rendered at all, with or without the patch here. On Safari some shadow is rendered, but it's not correct.
Comment 14 Simon Fraser (smfr) 2022-10-11 11:42:38 PDT
Right, the patch is not complete (it doesn't handle invalidation on child elements correctly).
Comment 15 Fujii Hironori 2022-10-11 13:16:53 PDT
It looks like bug#118411.
Comment 16 Vitor Roriz 2023-04-17 07:13:50 PDT
Pull request: https://github.com/WebKit/WebKit/pull/12797
Comment 17 Filipe Norte 2024-01-16 23:54:15 PST
Hello
This issue is affecting us. Was wondering if anyone is looking further into this?
Thanks