Bug 207586 – CSS style 'filter: drop-shadow...' does not render correctly without repaint.

• Status: ASSIGNED
• Component: CSS

[Drew McMurry]

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

[Radar WebKit Bug Importer]

<rdar://problem/59430460>

[Simon Fraser (smfr)]

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

[Simon Fraser (smfr)]

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

[Simon Fraser (smfr)]

Reopening to track the non-transition repaint issues with drop-shadow.

[Simon Fraser (smfr)]

Created attachment 453998 [details]
Patch

[Simon Fraser (smfr)]

Created attachment 454007 [details]
Patch

[zalan]

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.

[Simon Fraser (smfr)]

Created attachment 454625 [details]
Patch

[Simon Fraser (smfr)]

Affects these tests:

css3/filters/effect-combined-hw.html
css3/filters/effect-drop-shadow-hw.html
css3/filters/effect-drop-shadow.html

[Miguel Gomez]

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

[Miguel Gomez]

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?

[Miguel Gomez]

(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?

[Miguel Gomez]

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.

[Simon Fraser (smfr)]

Right, the patch is not complete (it doesn't handle invalidation on child elements correctly).

[Fujii Hironori]

It looks like bug#118411.

[Vitor Roriz]

Pull request: https://github.com/WebKit/WebKit/pull/12797

[Filipe Norte]

Hello
This issue is affecting us. Was wondering if anyone is looking further into this?
Thanks