SVG feGaussianBlur and feColorMatrix filters not working in Chrome?

Question

I'm attempting to use the filters from this code http://bl.ocks.org/nbremer/0e98c72b043590769facc5e829ebf43f . The achieved effect is good in Firefox 56 (64bits) on Win 7, but it is strange in Chrome 62 (64bits). The colors are much lighter and the effect doesn't look as smooth as in FF.

I've read a lot of questions about Safari not displaying these filters correctly, but I can't find anything about Chrome.

Please see screenshots below :

• Firefox

• Chrome

Any idea what is causing the difference and how to fix it in Chrome ?

Answer 1

The Color Matrix filter applied reads

<feColorMatrix mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" />

It is - in theory - mathematically identical to the following Component Transfer filter:

<feComponentTransfer>
  <feFuncA type="linear" slope="19" intercept="-9" />
</feComponentTransfer>

In practice, implementations seem to make a difference. For me, the second version gives the intended result in Chrome 62 (Linux), while the first version is washed-out as described.

Unfortunately both versions do not work with Firefox for Windows and Safari.

Codepen

The filter tries to create a sort of "cutoff" value that says: if opacity is below a theshold value, set it to 0, if it is above, set it to 1. But in fact the is a small intermediate region (0.437 < opacity < 0.526) where the resulting opacity is inbetween.

If you want to work with a truely discrete function, it would be this one:

<feComponentTransfer>
  <feFuncA type="discrete" tableValues="0 1" />
</feComponentTransfer>

Codepen

And this seems to work in Firefox for Windows.