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)
<rdar://problem/45787332>
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.