Bug 155887 – Drop Shadow Filter prevents inline SVGs from displaying in Safari 9.1

• Component: CSS
• Status: RESOLVED CONFIGURATION CHANGED

[Joel G Goodman]

Applies to Safari 9.1 and mobile Safari released with iOS 9.3. If a drop-shadow filter is applied via CSS to an inline SVG, the SVG will not be visible. Interestingly enough, the box model is adhered to, and you can still inspect the various SVG parts, they just are not visible. Removing the drop-shadow filter fixes this behavior.

I have not tested with any other CSS filters at this point, but drop-shadow filters on SVGs worked prior to the release of Safari 9.1

[Mike Sherov]

This is affecting https://behance.net as well, we use inline SVG with drop shadow for our appreciation buttons. See here: https://www.behance.net/gallery/35746977/Dolomites-Heart-Of-The-Alps

If the filter is removed from the `#appreciation svg` selector, the button rendered just fine.

[Matthias Kretschmann]

In my test (Safari 9.1 / OS X 10.11.4) this is happening with ALL css filters, not just drop-shadow. 

Here's an isolated test case: https://jsfiddle.net/kremalicious/zf9cnjm0/

[Radar WebKit Bug Importer]

<rdar://problem/26815681>

[Ahmad Saleem]

Created attachment 460978 [details]
Safari 15.5 matches other browsers

I am unable to reproduce this issue based on attached test case in Comment 02 using Safari 15.5 on macOS 12.4. It matches with all other browsers and show alien / vampiric something character and all elements are visible (all legs, hoverboard, teeth etc.).

I think it was fixed along the way and can be marked as "RESOLVED CONFIGURATION CHANGED". If I tested incorrectly, please retest accordingly and happy to be educated. Thanks!