Bug 257258 – SVG feConvolveMatrix filter not working in iOS and sometimes on MacOS

• Status: NEW
• Component: SVG

[Ran Buchnik]

I'm using this SVG filter on a canvas element like this:

HTML:
<svg id="svg" style="display:none">    <filter id="Sharpen"> <feConvolveMatrix order="3 3" preserveAlpha="true" kernelMatrix="1 -1 1 -1 -1 -1 1 -1 1" mode="multiplay"></feConvolveMatrix> </filter>  </svg>

<canvas></canvas>
CSS:
canvas {
    filter: url(#Sharpen);
}

Here is an example:
https://v.hexa3d.io/index.html?load=%2Fviews%2Fproduction%2Fitem%2F2023419%2F8854183846513425%2F8854183846513425.glb&autorotate=true&json-data=1683117626476&decrypt=1&tv=147&br=true&webp=1&watermark=1&pp-sharpen=3
For comparison, this is the same experience without the filter:
https://v.hexa3d.io/index.html?load=%2Fviews%2Fproduction%2Fitem%2F2023419%2F8854183846513425%2F8854183846513425.glb&autorotate=true&json-data=1683117626476&decrypt=1&tv=147&br=true&webp=1&watermark=1

You can see it's working well on MacOS with Chrome. You can also see it's working well on MacOS Safari this example:
https://360.hexa3d.io/?path=//360.hexa3d.io/views/20230523/ec938f417bcf464b80e3f540fc025186/&last=299&suffix=webp&sharpen=3
For comparison, this is the same experience without the filter:
https://360.hexa3d.io/?path=//360.hexa3d.io/views/20230523/ec938f417bcf464b80e3f540fc025186/&last=299&suffix=webp

The last example doesn't work on iOS though (both Safari and Chrome). You will see the effect eventually if you will stop the experience from rotating because we are applying the filter with javascript.

[Radar WebKit Bug Importer]

<rdar://problem/110059555>

[Said Abou-Hallawa]

I think this markup is incorrect:

<feConvolveMatrix order="3 3" preserveAlpha="true" kernelMatrix="1 -1 1 -1 -1 -1 1 -1 1" mode="multiplay">

There is no attribute mode="multiplay" associated with <feConvolveMatrix>. See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feConvolveMatrix.

The "mode" attribute is only applied to the <feBlend> element and one of its values is "multiply" not "multiplay".

[Said Abou-Hallawa]

Also it will be helpful if we can get a reduced test case for the bug.

[Ran Buchnik]

Here is a reduced test case for the bug:
https://stackblitz.com/edit/typescript-ezq48k?file=index.ts,style.css,index.html

Here it does work for 2D canvas for some reason but basically it's the same. I mean it's just HTML and CSS so it shoudn't matter how many code is ther beside that. The first examples that I have provided are not working although they are in the same window (no iframe or web-component) so I feel like they can better represent this bug's case. If you want me to add something to the reduced test case please let me know.