Filter Bug Turns SVGs Invisible on iOS Browsers

Written on April 5, 2016

Let's get right to it.

The Fix

Selector credit where credit is due.


/* iDevices Only */

@supports (-webkit-text-size-adjust:none) and (not (-ms-accelerator:true))
and (not (-moz-appearance:none))
{
  svg {
    filter:none !important;
  }

}

Background

The problem, once more, is that applying CSS filter to inline SVG elements in any iOS browser will cause the SVG to disappear entirely. While I can't tell you why it happens, I can tell you it affects all iOS browsers and not just one or another because all iOS browsers are essentially Safari.

I'll be sure to update this article if the status of that bug changes.