SVG filters crash on iOS and are slow in general

• Component: SVG
• Status: NEW ---

[Jan Bösenberg]

Created attachment 353709 [details]
Test case for filter performance

A simple SVG using filters may crash on Safari iOS and is very slow.

To reproduce the issue open the attached test case or follow this link:   https://codepen.io/anon/pen/eQOxKE

With each cycle the test adds a clone of an SVG to the document. The SVG consists of a rect which has a filter applied.

It crashes after ~10 cycles on iPhone 4s, ~35 cycles on iPhone X and ~80 cycles on iPhone SE. On Safari desktop it is easily five times slower than Chrome, maybe comparable to Internet Explorer 11.

More notes:
- The same problem occurs if one SVG is created with multiple filtered rect elements, even if the same filter is applied to all elements.
- It does not matter what the filter does, even an empty filter containing only <feOffset /> gives the same result.
- I could not reproduce the crash with masks, so there seems to be a difference (although better performance on masks would not hurt)

[Radar WebKit Bug Importer]

<rdar://problem/45787332>

[Jan Bösenberg]

For filters on monochrome rectangles (like in the example) where all pixels are manipulated the same (feColorMatrix, feComponentTransfer, etc), setting filterRes="1" will speed up things dramatically (by a factor 20 or so) and prevent the crashing.

Here is a modified version with filterRes set to 1:
https://codepen.io/anon/pen/LXYKJK

Unfortunately filterRes is obsolete in SVG2 and will be removed in the next Safari version (see bug 129565), so there will be no solution left. It's probably futile but I would suggest to keep support for filterRes in Safari until the performance issues with SVG filters are solved.