Bug 139281 - feConvolveMatrix does not work correctly when it is defined in the <defs> section and referenced by an svg element
Summary: feConvolveMatrix does not work correctly when it is defined in the <defs> sec...
Status: RESOLVED DUPLICATE of bug 225120
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: 528+ (Nightly build)
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Kiet Ho
URL:
Keywords: InRadar
: 139282 (view as bug list)
Depends on:
Blocks:
 
Reported: 2014-12-04 19:14 PST by Said Abou-Hallawa
Modified: 2023-06-13 23:42 PDT (History)
4 users (show)

See Also:

Attachments
Safari-Rendering (15.23 KB, image/png)
2014-12-04 19:14 PST, Said Abou-Hallawa 		no flags Details
WebKit r265135 (18.48 KB, image/png)
2023-06-13 23:40 PDT, Kiet Ho 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Said Abou-Hallawa 2014-12-04 19:14:52 PST 
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.
Comment 1 Said Abou-Hallawa 2014-12-05 15:35:43 PST 
*** Bug 139282 has been marked as a duplicate of this bug. ***
Comment 2 Xiaolong Li 2021-04-27 13:18:48 PDT 
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.
Comment 3 Tim Nguyen (:ntim) 2023-04-28 21:07:45 PDT 
rdar://19152706
Comment 4 Kiet Ho 2023-06-13 23:40:09 PDT 
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)
Comment 5 Kiet Ho 2023-06-13 23:42:09 PDT 
Whoops, wrong revision, I'll just directly link the git commit: 0dac14ca10cb771ef13516f2a82581b832f8a1c2

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