drop-shadow css filter not working with safari 9.1

Question

drop-shadow css filter not working with safari 9.1, please suggest any possible way to solve this problem.

I have been using a class for the rendered element but the element background is not visible because of filter.

.class{
    fill: #7FADC1;
    filter: url(#dropShadow);
    filter: drop-shadow(0 1px 2px #D5D5D5);
}

I believe solution [from this question](http://stackoverflow.com/questions/36705323/why-is-filterdrop-shadow-causing-my-svg-to-disappear-in-safari) maybe be better... — Yury Nekhaevskiy, Mar 10 '17 at 09:48

Clemens Mol · Answer 1 · 2016-04-19T14:53:01.927

I ran into the same problem. I solved it like this, the "moz-document url-prefix" is needed for FireFox. (The trick is ending with the SVG filter option).

.class {
  filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
  -webkit-filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.2));
  filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.2));
  -ms-filter: url(#drop-shadow);
  filter: url('#drop-shadow');
}

@-moz-document url-prefix() {
  .class {
    filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.2));
  }
}

You also need to include this in your HTML (or use an URL to reference an external SVG).

<svg height="0" width="0" xmlns="http://www.w3.org/2000/svg" style="position: absolute;">
    <defs>
    <filter id="drop-shadow">
        <feGaussianBlur in="SourceAlpha" stdDeviation="10"/>
        <feOffset dx="0" dy="0" result="offsetblur"/>
        <feFlood flood-color="#000000" flood-opacity="0.2"/>
        <feComposite in2="offsetblur" operator="in"/>
        <feMerge>
          <feMergeNode/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
    </defs>
</svg>

@Rob Yes, thats why the solution I suggested works in Safari AND Firefox AND most other browsers. Just to trying to help by providing a complete example. — Clemens Mol, May 24 '16 at 05:57

drop-shadow css filter not working with safari 9.1

1 Answers1