Bug 261442 – Unexpected and inconsistent rendering / clipping of filter:drop-shadow() on SVG

• Status: NEW
• Component: CSS

[Stephen Nixon]

Created attachment 467651 [details]
Reproduction case with SVG and filter:drop-shadow()

Reproduction attached, and also available at https://codepen.io/thundernixon/pen/RwEVVjW

Summary: I am finding unexpected and inconsistent rendering / clipping of filter:drop-shadow() on an SVG.

Notes from several versions of Safari:
- In Safari Version 16.1 (18614.2.9.1.12) on an M1 Mac, the styling for filter:drop-shadow() gets cut off improperly, if that filter is applied on hover. Specifically, the shadow is cut off or clipped at the boundaries of the SVG. This happens whether or not overflow: visible; is set on the SVG element. This is somewhat inconsistent, and doesn't always behave in the exact same way. The issue doesn't seem to occur if the style is applied to a non-hovered element.
- In iOS Safari (iOS 16.6.1), drop-shadow works better, but still has unexpected clipping and artifacts.
- In Safari Technology Preview Release 173 (Safari 17.0, WebKit 18616.1.20.2), the drop-shadow does not seem to appear at all, on hover OR if applied to the element by default, without hover.

By constrast, the shadow works smoothly in Chrome Version 116.0.5845.140 and is not clipped.

Thanks for taking a look!

[Stephen Nixon]

Created attachment 467652 [details]
Safari clipping filter:drop-shadow() on SVG

The most common mis-rendering, in Safari 16 on macOS 13.0

[Radar WebKit Bug Importer]

<rdar://problem/115686312>

[Karl Dubost]

Created attachment 467749 [details]
rendering in Safari, firefox, chrome

I can confirm that for STP 177, the drop shadow doesn't exist at all.

[Karl Dubost]

A couple of tests failing.
https://wpt.fyi/results/css/filter-effects/drop-shadow-clipped-001.html?label=master&product=chrome%5Bexperimental%5D&product=edge%5Bexperimental%5D&product=firefox%5Bexperimental%5D&product=safari%5Bexperimental%5D&product=safari%5Bstable%5D&aligned&q=drop-shadow

[Karl Dubost]

Also previously
https://bugs.webkit.org/buglist.cgi?bug_status=UNCONFIRMED&bug_status=NEW&bug_status=ASSIGNED&bug_status=REOPENED&list_id=9558418&query_format=advanced&short_desc=drop-shadow&short_desc_type=allwordssubstr