Bug 261442

Summary: Unexpected and inconsistent rendering / clipping of filter:drop-shadow() on SVG
Product: WebKit Reporter: Stephen Nixon <stephen>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: karlcow, sabouhallawa, simon.fraser, sisk, webkit-bug-importer, zalan
Priority: P2 Keywords: BrowserCompat, InRadar, WPTImpact
Version: Safari 16   
Hardware: Mac (Apple Silicon)   
OS: macOS 13   
See Also: https://bugs.webkit.org/show_bug.cgi?id=207586
Attachments:
Description Flags
Reproduction case with SVG and filter:drop-shadow()
none
Safari clipping filter:drop-shadow() on SVG
none
rendering in Safari, firefox, chrome none

Description Stephen Nixon 2023-09-11 16:09:16 PDT 
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!
Comment 1 Stephen Nixon 2023-09-11 16:12:13 PDT 
Created attachment 467652 [details]
Safari clipping filter:drop-shadow() on SVG

The most common mis-rendering, in Safari 16 on macOS 13.0
Comment 2 Radar WebKit Bug Importer 2023-09-18 16:10:15 PDT 
<rdar://problem/115686312>
Comment 3 Karl Dubost 2023-09-19 01:09:19 PDT 
Created attachment 467749 [details]
rendering in Safari, firefox, chrome

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