SVG filter looks very different in Chrome vs Firefox

Question

I have created an example here:

<svg viewBox="0 0 800 200">
  <defs>
    <filter id="cloth">
      <feTurbulence  seed="399" type="fractalNoise" baseFrequency="10.797" id="weave"/>
      <feColorMatrix type="saturate" values="0"/>
      <feComposite   operator="arithmetic" k3="4"/>
      <feComposite   operator="in" in2="SourceGraphic"    result="rComp1"/>
      <feColorMatrix type="luminanceToAlpha"              result="rColor1"/>
      <feDiffuseLighting surfaceScale="-10" diffuseConstant="0.5">
        <feDistantLight azimuth="225" elevation="20"/>
      </feDiffuseLighting>
      <feComposite   operator="arithmetic"   in2="rComp1" k1="1" k2="1" k3="1"/>
      <feBlend       mode="multiply"         in ="rColor1"/>
      <feComposite   operator="arithmetic"                       k2="1.2"/>
      <feComposite   operator="in"           in2="rComp1" result="rComp2"/>
      <feColorMatrix type="luminanceToAlpha" in ="rComp2" result="rColor2"/>
      <feDiffuseLighting surfaceScale="-10" diffuseConstant="0.5" id="surfaceScale">
        <feDistantLight azimuth="225" elevation="20"/>
      </feDiffuseLighting>
      <feComposite   operator="arithmetic"   in2="rComp2" k1="1" k2="1" k3="2" id="dye"/>
      <feBlend       mode="multiply"         in ="rColor2"/>
      <feComposite   operator="arithmetic"                       k2="1.2"/>
      <feComposite   operator="in"           in2="rComp2"/>
    </filter>
  </defs>
  <rect width="800" height="200" filter="url(#cloth)"/>
</svg>

Open it in Chrome and Firefox and the results are quite different. I'm wondering if there is a formula to make them the same, like "multiply the k2 attribute in the feComposite elements by 1.8", something systematic. If not, then at least some suggestions as to how to get it to look like it does on Chrome on Firefox (I use Chrome as my primary dev browser, so that's where I designed the filter).

Unfortunately it's a big filter, so there are a lot of attributes to fiddle with.

Answer 1

It looks like Chrome's implementation of feDiffuseLighting in the linearRGB color-space is not correct (on Windows at least). If you add "color-interpolation-filters="sRGB" to your filter element, it will switch you to the sRGB color space and give you consistent results cross browser.

(FWIW - this filter is far more complex than it needs to be - there's no need to use lighting effects when the baseFrequency is this high - you should be able to do everything you want with one or two feColorMatrixes.)