Bug 242219

Summary:

Too many filters causes image to no longer render

Product:

WebKit

Reporter:

Paul Bogg <paul.bogg>

Component:

SVG

Assignee:

Nobody <webkit-unassigned>

Status:

NEW ---

Severity:

Normal

CC:

karlcow, sabouhallawa, simon.fraser, tanaka.toshiyuki, uki, webkit-bug-importer, xidorn-webkit, zimmermann

Priority:

Keywords:

BrowserCompat, CanvaBug, InRadar

Version:

Safari 15

Hardware:

All

OS:

macOS 12

See Also:

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

Bug Depends on:

244940, 245230

Bug Blocks:

Attachments:

Description	Flags
Self contained reproduction of bug	none
Real-world reproduction	none
Real-world reproduction (grouping fix)	none

Description Paul Bogg 2022-06-30 17:01:26 PDT

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

Comment 1 Said Abou-Hallawa 2022-06-30 17:35:20 PDT

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.

Comment 2 Paul Bogg 2022-06-30 17:47:16 PDT

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!

Comment 3 Radar WebKit Bug Importer 2022-07-07 17:02:13 PDT

<rdar://problem/96634944>

Comment 4 Karl Dubost 2022-07-12 22:28:27 PDT

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

Comment 5 uki 2022-09-01 20:52:07 PDT

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.

Comment 6 uki 2022-09-01 21:23:34 PDT

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.

Comment 7 Said Abou-Hallawa 2023-06-01 18:46:17 PDT

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