13

The situation is I have an inline SVG generated by Grunticon and inserted into the DOM. It's white on a grey background with a drop-shadow.

I used the following CSS for the shadow:

svg {
  -webkit-filter: drop-shadow(1px 1px 0 #141414);
  filter: drop-shadow(1px 1px 0 #141414);
}

This works fine in Chrome, Opera, Firefox and everywhere else I've tested it, except Safari on iOS and desktop. The CSS filter makes the SVG disappear.

It's not just the drop-shadow filter either, any filter seems to have this effect.

A demo is on Codepen at http://codepen.io/derekjohnson/pen/MyOaRY

Can this be worked round to make it work in Safari?

Derek Johnson
  • 285
  • 6
  • 24

1 Answers1

10

Annoying that this doesn't work, but Safari is the new IE after all! :P

A workaround is to wrap the SVG in another element and apply the filter to that.

Matt Stow
  • 6,053
  • 6
  • 24
  • 26
  • Is there an open bug for this behavior in Safari? I am wondering when it will be addressed. – zevnicsca Jul 03 '16 at 17:46
  • It appears to be fixed in Safari Technology Preview so we just have to wait a bit – Matt Stow Jul 04 '16 at 00:03
  • How do you "wait a bit" with countless users who will not update anything? – Gherman Oct 19 '17 at 10:24
  • I have the same issue with using stripe with filter:url(#id) in css to color svg called via tag. strangely, svg works like a charm on one page, and same code does not work on the other page. Cannot figure out why. – Gevorg Hakobyan Aug 15 '18 at 17:15