Inline SVG disappears in iOSand Safari when a CSS filter is applied

Question

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?

Answer 1

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.