Why is filter(drop-shadow) causing my SVG to disappear in Safari?

by

Probably is a little late, but just in case I will leave you my answer. I had the same problem with Safari and I figured out that this seems to be a Safari issue/bug. You can work around this bug just wrapping your SVG tag with another HTML tag like a div and apply to this element the drop-shadow filter as you did in your example.
Here you have your example modified with the wrapper element

https://codepen.io/mauromjg/pen/rLaqWG

<div class="svg-wrapper">
    <svg>...</svg>
</div>

//CSS
.svg-wrapper {
    -webkit-filter: drop-shadow( 2px 2px 4px rgba(0,0,0,.4) );
    filter: drop-shadow( 2px 2px 4px rgba(0,0,0,.4) );
}

Hope that helps!

More Related Contents:

  1. Some font-size’s rendered larger on Safari (iPhone)
  2. How to apply a CSS filter to a background image
  3. Transparent text cut out of background
  4. SVG data image not working as a background-image in a pseudo element
  5. is there a css hack for safari only NOT chrome?
  6. How to remove the border highlight on an input text element
  7. Why does order of transforms matter? rotate/scale doesn’t give the same result as scale/rotate
  8. CSS transparent curved shape with two rounded sides
  9. :not() selector not behaving the same between Safari and Chrome/Firefox
  10. Is there a way to use SVG as content in a pseudo element ::before or ::after
  11. How to animate handwriting text on the web page using SVG?
  12. how to properly display an iFrame in mobile safari
  13. Specify an SVG as a background image and ALSO style the SVG in CSS?
  14. Can I change the fill color of an svg path with CSS?
  15. How to make a element expand or contract to its parent container?
  16. SVG in img element proportions not respected in ie9
  17. How to calculate required hue-rotate to generate specific colour?
  18. Background-size with SVG squished in IE9-10
  19. Bug in CSS3 rotateY transition on Safari?
  20. How to Include CSS style when converting svg to png
  21. Safari/Chrome (Webkit) – Cannot hide iframe vertical scrollbar
  22. Font weight turns lighter on Mac/Safari
  23. Transparent hollow or cut out shape in HTML
  24. iOS 7 iPad Safari Landscape innerHeight/outerHeight layout issue
  25. 3d transforms on SVG element
  26. CSS change d property of
  27. WebKit CSS content Unicode bug?
  28. Chrome & Safari Error::Not allowed to load local resource: file:///D:/CSS/Style.css
  29. Tint image using CSS without overlay
  30. Image moves on hover when changing filter in chrome

Leave a Comment