266295 2023-12-12 10:49:36 -0800 Viewport-dependant weird tiling/ gaps when applying SVG filters 2026-01-04 11:43:04 -0800 1 1 1 Unclassified WebKit SVG Other Unspecified Unspecified NEW https://bugs.webkit.org/show_bug.cgi?id=136482 https://bugs.webkit.org/show_bug.cgi?id=151995 https://bugs.webkit.org/show_bug.cgi?id=279290 https://bugs.webkit.org/show_bug.cgi?id=279293 https://bugs.webkit.org/show_bug.cgi?id=270567 BrowserCompat, InRadar P2 Normal --- 279290 1 ana.tudor.lhnh webkit-unassigned karlcow maggotfish sabouhallawa simon.fraser webkit-bug-importer zimmermann oldest_to_newest 1999034 0 ana.tudor.lhnh 2023-12-12 10:49:36 -0800 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 1999046 1 zimmermann 2023-12-12 11:39:52 -0800 Thanks a lot Ana, nice testcases. @Said, do you eventually have some time to check those issues? 1999367 2 webkit-bug-importer 2023-12-13 12:44:36 -0800 <rdar://problem/119627691> 1999368 3 simon.fraser 2023-12-13 12:44:54 -0800 Possibly related to bug 151995. 2058292 4 simon.fraser 2024-09-06 14:27:36 -0700 Part of the issue here is that SVGFEDisplacementMapElement doesn't implement `outsets()`. 2058316 5 simon.fraser 2024-09-06 16:34:37 -0700 I will fix one subset of the issues via bug 279290. 2058324 6 simon.fraser 2024-09-06 16:54:07 -0700 I filed bug 279293 on https://codepen.io/thebabydino/pen/qBgweEw because WebKit slices in a different location. 2058330 7 simon.fraser 2024-09-06 17:09:18 -0700 I think with bug 279290 fixed, the only remaining issue is that https://codepen.io/thebabydino/pen/VwgNqpv remains blank. 2169134 8 simon.fraser 2026-01-04 11:43:04 -0800 I filed bug 304911 about https://codepen.io/thebabydino/pen/VwgNqpv not rendering