feConvolveMatrix does not work correctly when it is defined in the <defs> section and referenced by an svg element

• Component: SVG
• Status: RESOLVED DUPLICATE

[Said Abou-Hallawa]

Created attachment 242608 [details]
Safari-Rendering

Open the following svg in WebKit:

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
     
  <defs>
    <image id="MyImage" width="10" height="10" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAADdJREFUGNNjZGD4/5+BCMDCwMDAwNDQiF9VQz0DEwORgPoKGRkY/v9fe+M5XkXBGpID7kZiFAIAEbULDl5w/68AAAAASUVORK5CYII="/>
    <filter id="noop" x="0%" y="0%" width="100%" height="100%">
      <feConvolveMatrix order="1" kernelMatrix="1"/>
    </filter>
  </defs>

  <g transform="translate(10, 10)">
    <use x="0" y="0" xlink:href="#MyImage" />
    <use x="20" y="0" xlink:href="#MyImage">
      <filter id="noop" x="0%" y="0%" width="100%" height="100%">
        <feConvolveMatrix order="1" kernelMatrix="1"/>
      </filter>
    </use>
    <g filter="url(#noop)">
      <use x="40" y="0" xlink:href="#MyImage" />
    </g>
  </g>
</svg>

Result: The last image looks different from the first two images.
Expected: The three images should look exactly the same. The first image is the row image. The second image has a convolution matrix filter with no-opertaion matrix so the image should not be affected by this filter. The third image has the same filter but it references it from the <defs> section. So It should look the same as the first two but it does not.

[Said Abou-Hallawa]

*** Bug 139282 has been marked as a duplicate of this bug. ***

[Xiaolong Li]

The issue happens when defining a filter inside an <svg> element and directly reference/apply it on the <svg> element itself. In this case, Safari seems to "over-apply" the effect, and one guess is that it may have applied the effect twice.

This issue doesn't appear in Chrome or Firefox. I also checked SVG spec and this is a legal structure.

If I move the filter attribute to a sub-element of the <svg>, then it works correctly.

Here is an example in CodePen demonstrating this. Opening it in Safari/Firefox/Chrome to see the difference: https://codepen.io/xiaolong-li/pen/YzNMZpM

I found an existing bug (https://bugs.webkit.org/show_bug.cgi?id=139281) that may be related to this, but not sure.

[Tim Nguyen (:ntim)]

rdar://19152706

[Kiet Ho]

Created attachment 466688 [details]
WebKit r265135

Seems like this is the same bug as https://bugs.webkit.org/show_bug.cgi?id=139281, which is fixed. Attached shows the SVG rendered in WebKit r265135 (which contains a fix for the bug)

[Kiet Ho]

Whoops, wrong revision, I'll just directly link the git commit: 0dac14ca10cb771ef13516f2a82581b832f8a1c2

*** This bug has been marked as a duplicate of bug 225120 ***