[Webkit-unassigned] [Bug 266295] New: Viewport-dependant weird tiling/ gaps when applying SVG filters

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=266295

            Bug ID: 266295
           Summary: Viewport-dependant weird tiling/ gaps when applying
                    SVG filters
           Product: WebKit
           Version: Other
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: SVG
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: ana.tudor.lhnh at gmail.com
                CC: sabouhallawa at apple.com, zimmermann at kde.org

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

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20231212/b5195550/attachment-0001.htm>