1

I'm trying to make a text effect with a drop shadow gaussian blur on my svg. Under firefox it's look good, but under chrome it's horrible, as you can see below.

enter image description here

What is strange is taht when zooming (ctrl + mousewheel) at the max level possible, it's suddenly looks good, but at intermediate zooming level, it's still horrible.

My code to generate this example is:

<html>
<head>
</head>
<body>
<svg width="200px" heigth="200px">
    <filter id="dropshadow" height="130%">
        <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
        <feOffset dx="2" dy="2" result="offsetblur" />
        <feMerge>
            <feMergeNode />
            <feMergeNode in="SourceGraphic" />
        </feMerge>
    </filter>
    <text x="50" y="50" style="filter:url(#dropshadow)">This is a test</text>
</svg>
</body>
</html>

I've taken the drop shadow code from this question.

Note that I'm using one of the last version of Firefox (33.1) and of Chrome (Version 38.0.2125.122 m).

Community
  • 1
  • 1
Alexxx
  • 766
  • 1
  • 11
  • 19
  • 2
    Possibly this bug? https://code.google.com/p/chromium/issues/detail?id=422176 – Paul LeBeau Nov 13 '14 at 11:47
  • Yest it's look like this bug (regression). It seems to be already patched but waiting for a new version of chrome to use this patch. – Alexxx Nov 13 '14 at 13:32

1 Answers1

1

This isn't correct behaviour at all. It looks like Chrome is failing to render the alpha channel correctly for text at small font sizes.

This is what I get if I just extract the alpha channel from text sized at 18, 36 and 72pt:

bad chrome

<svg width="200" height="200" viewBox="0 0 200 200">
  <defs>
  <filter id="f" width="200%" height="200%">
    <feMerge>
      <feMergeNode in="SourceAlpha" />
    </feMerge>
  </filter>
  </defs>
  <rect x="0" y="0" width="200" height="200" fill="#eee" />
  <text font-size="18" x="5" y="25" style="filter:url(#f)">Small</text>
  <text font-size="36" x="5" y="75" style="filter:url(#f)">Medium</text>
  <text font-size="72" x="5" y="165" style="filter:url(#f)">Large</text>
</svg>

EDIT: This isn't an answer, so I've flagged as community wiki.

r3mainer
  • 23,981
  • 3
  • 51
  • 88