Bug 266295 – Viewport-dependant weird tiling/ gaps when applying SVG filters

• Status: NEW
• Component: SVG

I came across this while trying to achieve sliced text effects. By sliced text effects, I mean things like:

* https://www.pinterest.com/pin/57139489011897480/

* https://www.pinterest.com/pin/outside-lands-creative-paper-typography-by-owen-gildersleeve--508695720422079050/

* https://www.pinterest.com/pin/582794008042826341/

The first one is a plain horizontal slicing effect, which I would have thought is pretty straightforward.

We create a displacement map that's `100%` red in the top half, `0%` red in the bottom half and `50%` transparent everywhere and use it for the slicing effect.

```
svg(width='0' height='0')
	filter#f(primitiveUnits='objectBoundingBox'
	         x='0' y='0' width='100%' height='100%')
		feFlood(result='back')
		feFlood(height='.5' flood-color='red')
		feComposite(in2='back')
		feComponentTransfer: feFuncA(type='discrete' tableValues='.5')
		feDisplacementMap(scale='.04' in='SourceGraphic' xChannelSelector='R')
```

This seems to work fine regardless of any other factors in both Chrome and Firefox.

However, it has weird gaps and tiling in Safari (tested via Epiphany) and these depend on the viewport, though from a certain viewport size down, everything seems to look fine.

Live demo https://codepen.io/thebabydino/pen/qBgweEw?editors=1100

Recording of the problem on viewport resize https://twitter.com/anatudor/status/1734633884212400389

Even weirder, the full demo with shadows does not seem to exhibit the same tiling problem https://codepen.io/thebabydino/pen/xxMyvPp

If I remove the shadow from the demo, yes, we still get the tiling and the gaps. But once the sliced & offset text is composited with the shadow, the gaps & tiling issue disappears.

---

For diagonal effects, my first thought was create a displacement map as a `feImage` that uses an SVG element as the source. We cannot use a link to an image, as this doesn't work in Chrome and it's probably never going to work for security reasons (and it applies to data URIs as well).

```
svg(width='100%' height='100%')
	filter#f
		feImage(xlink:href='#i')
		
	defs
		g#i
			rect(width='100%' height='100%' fill='red')
			line(x1='-50%' x2='150%' 
			     transform='rotate(45)' 
			     stroke='blue' stroke-width='300%' stroke-dasharray='15%')
```

`feImage` with a reference to another SVG element doesn't work in Firefox, only with a link to an image or data URI - a 15 year old bug with no signal of getting fixed any time soon.

So this tactic should only create diagonal stripes in Chrome and Safari and... it almost does, just that it's buggy. In Chrome it only works after triggering a viewport resize and in Safari, we get the exact same tiling problem.

Live demo https://codepen.io/thebabydino/pen/VwgNqpv?editors=1100

Screenshots from multiple systems in the replies https://twitter.com/anatudor/status/1734563149578404038

An attempt at the actual effect, it would actually work in Safari if it wasn't for the tiling problem! At certain viewport sizes, it actually looks like it works!

https://codepen.io/thebabydino/pen/JjxZxod?editors=1000

---

My second thought when it came to diagonal effects was to use the `SourceGraphic` as its own displacement map. This does not work at all in Firefox, it's buggy in a really weird way in Chrome and exhibits the exact same weird gaps and tiling problem in Safari.

```
svg(width='0' height='0')
	filter#f
		feDisplacementMap(scale='80' 
		                  xChannelSelector='R' yChannelSelector='B')
```

Live demo https://codepen.io/thebabydino/pen/KKJrKJj

Lots of screnshots and recordings from multiple devices in the replies https://twitter.com/anatudor/status/1734479534458589200 - some reports say Safari on iOS works fine, though I wonder whether that's not related to the smaller viewport size?

Trying this with text instead of a rectangle looks even worse https://codepen.io/thebabydino/pen/eYxPqjR?editors=1100

[Nikolas Zimmermann]

Thanks a lot Ana, nice testcases.

@Said, do you eventually have some time to check those issues?

[Radar WebKit Bug Importer]

<rdar://problem/119627691>

[Simon Fraser (smfr)]

Possibly related to bug 151995.

[Simon Fraser (smfr)]

Part of the issue here is that SVGFEDisplacementMapElement doesn't implement `outsets()`.

[Simon Fraser (smfr)]

I will fix one subset of the issues via bug 279290.

[Simon Fraser (smfr)]

I filed bug 279293 on https://codepen.io/thebabydino/pen/qBgweEw because WebKit slices in a different location.

[Simon Fraser (smfr)]

I think with bug 279290 fixed, the only remaining issue is that https://codepen.io/thebabydino/pen/VwgNqpv remains blank.