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
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.
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/
<rdar://problem/26815681>
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!