Bug 270567 – Incorrect filter primitive area with tiling

• Component: SVG
• Status: NEW

[Ana Tudor]

Created attachment 470200 [details]
The result in a demo after also applying a feTile in Epiphany (left) vs. Chrome (right)

Consider a square element (which also gets a checkerboard background pattern to make things more obvious).

Consider an SVG filter applied on it, the only primitive being a `feComposite` with a `height` attribute set to a quarter of the filter area.

```
  <svg width="0" height="0">
    <filter id="f" primitiveUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%">
      <feComposite height="0.25"/>
    </filter>
  </svg>
```

Live test https://codepen.io/thebabydino/pen/ExJVgLo?editors=1000

I would expect the output to be the top quarter of the filter area, but that's not what happens.

Note that I've only tested via Epiphany on Ubuntu and asking around (one https://twitter.com/anatudor/status/1765305940977336376 + two https://bsky.app/profile/anatudor.bsky.social/post/3kmze7a3hrk2p) about what it looks like in actual Safari, the results are all over the place: no filter applied, same result as in Chrome and Firefox or same result as I'm getting in Epiphany.

This is a very big problem if I want to have a `feTile` after that `feComposite` (see atachment).

After refresh and resize, Epiphany also shows me the same result as in Chrome and Firefox. However, if I switch to a different CodePen view, I see the same broken result as at first.

[Ana Tudor]

Created attachment 470201 [details]
What happens on resizing the viewport.

The problem seems to depend on the viewport.

[Alexey Proskuryakov]

I sometimes see the bad rendering in Safari on first load, or when switching back to the codepen tab. Once it's drawn properly, resizing doesn't break it.

[Radar WebKit Bug Importer]

<rdar://problem/124145301>

[Said Abou-Hallawa]

This is fixed by the PR of bug 265465. This PR sets the geometry of the referenced SVG filter correctly.

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

[Said Abou-Hallawa]

The final https://github.com/WebKit/WebKit/pull/25512 does not fix this bug.

[Simon Fraser (smfr)]

Created attachment 472484 [details]
Test

[Simon Fraser (smfr)]

The test case shows that we're re-applying the effect at the top of a lower tile, because we've got the clip rect confused with the effect rect.

[Simon Fraser (smfr)]

This happens on various different operators (feBlend, feOffset, feComposited) when the height attribute is specified.

[Simon Fraser (smfr)]

Also reproduces with a simple feImage filter split across tile boundaries. This only reproduces with SVG filters referenced from CSS, not in pure SVG.

The fundamental problem is that some clipped rectangle is feeding into the computation of the primitiveSubregion.

[Simon Fraser (smfr)]

We conflate the dirty rect with the primitiveSubregion in:
RenderLayerFilters::beginFilterEffect:
  m_filterRegion is clipped to the dirty rect, and feeds into filter.setFilterRegion() and GraphicsContextSwitcher::create()'s sourceImageRect

createReferenceFilter():
  filterRegion.intersect(inflatedDirtyRect)

[Simon Fraser (smfr)]

We need a really surgical separation of clipping rects vs. filter regions. Even `Filter` probably needs to track them separately.