Bug 325131 – SVG filters causes blurry edges when embedded in an <img> tag, but not when rendered directly

• Status: NEW
• Component: Layout and Rendering

[Alex Chan]

Created attachment 481537 [details]
Screenshot and example code

Consider the following SVG:

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="300" viewBox="0 0 500 300">
  <rect width="500" height="300" fill="blue"/>
  <path d="M50 150 l 80 -20 l 20 -80 l 20 80 l 80 20 l -80 20 l -20 80 l -20 -80 Z" fill="white"/>
  <g filter="url(#filter)">
    <path d="M250 150 l 80 -20 l 20 -80 l 20 80 l 80 20 l -80 20 l -20 80 l -20 -80 Z" fill="yellow"/>
  </g>
  <defs>
    <filter id="filter">
      <feBlend mode="normal" in="SourceGraphic" in2="SourceGraphic"/>
    </filter>
  </defs>
</svg>

Three tests cases:

1. Open the SVG file directly in Safari. Both stars appear with crisp edges.
2. Copy the SVG directly into an HTML page, open the HTML page in Safari. Both stars appear with crisp edges.
3. Embed the SVG in an HTML page using an <img> tag, open the HTML page in Safari. The yellow star with the filter applied has blurry edges.

I can reproduce this in Safari 26.4 (20264.1.16.18.2) and Safari 27.0 (21625.1.29.18.28). If you remove the <feBlend>, the problem goes away.

In Firefox and Chrome, the stars appear with crisp edges in all three cases.

I'm using a 2x screen; when testing in Responsive Design Mode, the blurring still looks worse on the filtered star in 1x (but I don't have a real 1x screen to test with).

For more complex SVGs exhibiting this problem, see https://tailscale.com/blog/making-tailscale-faster

There are a couple of similar-sounding bugs, but I couldn't find one that specifically mentioned SVG filters.

[Radar WebKit Bug Importer]

<rdar://problem/188890391>

[Taher]

Pull request: https://github.com/WebKit/WebKit/pull/77569