Bug 242219 – Too many filters causes image to no longer render

• Status: NEW
• Component: SVG

[Paul Bogg]

Created attachment 460595 [details]
Self contained reproduction of bug

Adding many filters to an SVG image prevents the image from being rendered in Safari - tested on multiple devices.  Affects latest Safari. 

Simplest way to illustrate this is with JS Fiddle: 

https://jsfiddle.net/0s78Lufv/2/


Attached a self contained html page with the same code

Testing the page in other browser works fine:  Chromium, Firefox

[Said Abou-Hallawa]

This is a known limitation in WebKit. For SVGFilter, the number of total effects can't exceed 100. This number includes the SourceGraphic (which is the target element we apply the filter to). See this statement:

    if (!success || expression.size() > maxTotalNumberFilterEffects)
        return std::nullopt;

in SVGFilter::buildExpression where maxTotalNumberFilterEffects is defined as

static constexpr unsigned maxTotalNumberFilterEffects = 100;

So I am not sure. We could remove this limitation. But is there any webpage which uses more than 100 effects in an SVGFilter?

Even the attached test case is just a stress test case. It creates 100 feGaussianBlur with the same parameters and add them to the filter.

[Paul Bogg]

Thanks for your comment Said!

At Canva we are continuing to increase the options that we provide users to create with for their graphic designs - our users have started to see the issues as they are making more and more use of custom filters. Many of our users are using iPhones and iPads to do create these designs (which is great!) but have started to report hitting these limitations. It surprised me too to see this!

If we could increase that limit to 150 or even 200, that would be appreciated!

[Radar WebKit Bug Importer]

<rdar://problem/96634944>

[Karl Dubost]

The page fails for me in both Safari Tech Preview and Chromium Canary latest versions
Firefox shows the images.

[uki]

Created attachment 462085 [details]
Real-world reproduction

Although seemingly unrelated to the `maxTotalNumberFilterEffects` condition, this real-world example fails to render in webkit as well.

[uki]

Created attachment 462086 [details]
Real-world reproduction (grouping fix)

A quick workaround we found to avoid these failures in rendering was to separate filter primitives into smaller groups to be applied sequentially.
However, we have noticed an increased number of crashes on iOS devices after deploying this fix.

[Said Abou-Hallawa]

With 264807@main, the first two test cases now draw the filtered image. But the display is very slow.