Bug 242219

Summary: Too many filters causes image to no longer render
Product: WebKit Reporter: Paul Bogg <paul.bogg>
Component: SVGAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: karlcow, sabouhallawa, simon.fraser, tanaka.toshiyuki, uki, webkit-bug-importer, xidorn-webkit, zimmermann
Priority: P2 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

Paul Bogg
Reported 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
Attachments
Self contained reproduction of bug (2.99 KB, text/html)
2022-06-30 17:01 PDT, Paul Bogg 		no flags
Details
Real-world reproduction (29.72 KB, text/html)
2022-09-01 20:52 PDT, uki 		no flags
Details
Real-world reproduction (grouping fix) (29.92 KB, text/html)
2022-09-01 21:23 PDT, uki 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Said Abou-Hallawa
Comment 1 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.
Paul Bogg
Comment 2 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!
Radar WebKit Bug Importer
Comment 3 2022-07-07 17:02:13 PDT
<rdar://problem/96634944>
Karl Dubost
Comment 4 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.
uki
Comment 5 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.
uki
Comment 6 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.
Said Abou-Hallawa
Comment 7 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.
Note You need to log in before you can comment on or make changes to this bug.