2

It's a magic, but I face a weird behavior in svg's shadow appearing on Safari. Seems like it does not want to deal with feDropShadow normally, like it can the rest part of browsers (Chrome for example). It makes a figure blurred and unclear to look.

So, if you run my snippet below in both Safari and Chrome, you'll totally see the difference between svg stars once zoomed.

I've also saw these posts, but they're unrelevant:

A little code to reproduce: 

<!DOCTYPE html>
<html>
<body>

<h1>My first SVG</h1>

<svg width="100" height="100">
   <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
   Sorry, your browser does not support inline SVG.
</svg> 

<svg xmlns="http://www.w3.org/2000/svg" class="default___3oPC0 " stroke="transparent" stroke-width="0" width="34" height="34" viewBox="-2.3 -2.1 9 9" 

fill="url(#sidebar_svg_gradient_regular_desktop_gold)"
filter="url(#svg_sidebar_green_regular_desktop_gold_filter)"


>
<filter id="svg_sidebar_green_regular_desktop_gold_filter">
 <feDropShadow dx="0" dy="0" flood-color="#f4b701" stdDeviation="1.2"></feDropShadow>
</filter>

<linearGradient id="sidebar_svg_gradient_regular_desktop_gold" gradientTransform="rotate(90)" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#f4b701"></stop><stop offset="1" stop-color="#b08505"></stop></linearGradient>


<path d="M2.5,0l.59,1.82H5L3.45,2.94l.6,1.82L2.5,3.63,1,4.76l.6-1.82L0,1.82H1.91Z"></path>

</svg>
 
</body>
</html>

UPDATE

Seems like a problem is hiding inside webKit engine core itself, based on the still opened report from far 2013: https://bugs.webkit.org/show_bug.cgi?id=119300

I've found some solution for my case. It doesn't perfect, but could totally work for Safari: https://github.com/artdecocode/daily-log/blob/master/shadow.md

Resource: SVG: Drop-Shadow filter pixelates SVG on mobile Safari

Sviat Kuzhelev
  • 1,758
  • 10
  • 28
  • Maybe your issue is [one of these](https://bugs.webkit.org/buglist.cgi?bug_status=__open__&content=feDropShadow&no_redirect=1&order=Importance&query_format=specific) if not, you should probably raise a new issue on that bugtracker. – Robert Longson Aug 07 '19 at 09:25
  • @RobertLongson thank you. You're right! Meanwhile, seems like the bugtracker above is dead for a while. So, i don't think it's still a hope to be hear there... – Sviat Kuzhelev Aug 07 '19 at 09:27
  • Still haven't found a proper solution for this, other than using pngs, or putting the svg inline, which still looks a little blurry sometimes... – 00-BBB Aug 26 '20 at 11:39

0 Answers0