191197 2018-11-02 10:23:53 -0700 SVG filters crash on iOS and are slow in general 2022-02-16 05:27:54 -0800 1 1 1 Unclassified WebKit SVG Safari 12 All All NEW InRadar P2 Major --- 1 jan.boesenberg webkit-unassigned sabouhallawa simon.fraser tomac webkit-bug-importer xidorn-webkit zimmermann oldest_to_newest 1474545 0 353709 jan.boesenberg 2018-11-02 10:23:53 -0700 Created attachment 353709 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) 1474828 1 webkit-bug-importer 2018-11-03 16:38:13 -0700 <rdar://problem/45787332> 1474861 2 jan.boesenberg 2018-11-04 02:27:20 -0800 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. 353709 2018-11-02 10:23:53 -0700 2018-11-02 10:23:53 -0700 Test case for filter performance filter-crash-test.html text/html 1540 jan.boesenberg PGh0bWw+DQo8aGVhZD4NCiAgPHRpdGxlPlNWRyBGaWx0ZXIgUGVyZm9ybWFuY2UgYW5kIENyYXNo IFRlc3Q8L3RpdGxlPg0KPC9oZWFkPg0KPGJvZHk+DQogIDxwPlNWRyBSZWN0IENvdW50OiA8c3Bh biBpZD0icmVjdC1jb3VudCI+MTwvc3Bhbj48L3A+DQogIDxwPmZwczogPHNwYW4gaWQ9ImZwcyI+ PC9zcGFuPjwvcD4NCg0KICA8c3ZnIGlkPSJzdmciIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6 Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5 OS94bGluayIgd2lkdGg9IjUxMiIgaGVpZ2h0PSI1MTIiIHZpZXdCb3g9IjAsMCwxMDI0LDEwMjQi Pg0KICAgIDxkZWZzPg0KICAgICAgPGZpbHRlciBpZD0iZW1wdHktZmlsdGVyIiB4PSIwIiB5PSIw IiB3aWR0aD0iMSIgaGVpZ2h0PSIxIj4NCiAgICAgICA8ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAg MCAwIDAgMSAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMC4wMSIgLz4NCiAgICAgIDwvZmls dGVyPg0KICAgIDwvZGVmcz4NCiAgICA8ZyBmaWxsPSIjYzJjMmMyIj4NCiAgICAgIDxyZWN0IGlk PSJzdmctcmVjdCIgZmlsdGVyPSJ1cmwoI2VtcHR5LWZpbHRlcikiIHg9IjAiIHk9IjAiIHdpZHRo PSIxMDI0IiBoZWlnaHQ9IjEwMjQiIC8+DQogICAgPC9nPg0KICA8L3N2Zz4NCg0KICA8c2NyaXB0 Pg0KICAgIHZhciByZWN0Q291bnQgPSAxOw0KICAgIHZhciBzdmdSZWN0RWxlbSA9IGRvY3VtZW50 LmdldEVsZW1lbnRCeUlkKCdzdmctcmVjdCcpOw0KICAgIHZhciByZWN0Q291bnRFbGVtID0gZG9j dW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3JlY3QtY291bnQnKTsNCg0KICAgIHZhciBmcHNFbGVtID0g ZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2ZwcycpOw0KDQogICAgZnVuY3Rpb24gaW5zZXJ0UmVj dCgpIHsNCiAgICAgIHdpbmRvdy5yZXF1ZXN0QW5pbWF0aW9uRnJhbWUoZnVuY3Rpb24oKSB7DQog ICAgICAgIHZhciBzdGFydCA9IG5ldyBEYXRlKCkuZ2V0VGltZSgpOw0KDQogICAgICAgIHZhciBj bG9uZWRTdmdSZWN0RWxlbSA9IHN2Z1JlY3RFbGVtLmNsb25lTm9kZSh0cnVlKTsNCg0KICAgICAg ICAvLyBpbnNlcnQgY2xvbmVkIHJlY3QgU1ZHIGVsZW1lbnQNCiAgICAgICAgc3ZnUmVjdEVsZW0u cGFyZW50Tm9kZS5hcHBlbmRDaGlsZChjbG9uZWRTdmdSZWN0RWxlbSk7DQoNCiAgICAgICAgcmVj dENvdW50RWxlbS50ZXh0Q29udGVudCA9ICsrcmVjdENvdW50Ow0KDQogICAgICAgIHdpbmRvdy5y ZXF1ZXN0QW5pbWF0aW9uRnJhbWUoZnVuY3Rpb24oKSB7DQogICAgICAgICAgdmFyIGZwcyA9IE1h dGgucm91bmQoMTAwMDAwIC8gKG5ldyBEYXRlKCkuZ2V0VGltZSgpIC0gc3RhcnQpKSAvIDEwMDsN CiAgICAgICAgICBmcHNFbGVtLnRleHRDb250ZW50ID0gZnBzOw0KDQogICAgICAgICAgd2luZG93 LnNldFRpbWVvdXQoaW5zZXJ0UmVjdCwgMTAwKTsNCiAgICAgICAgfSk7DQogICAgICB9KTsNCiAg ICB9Ow0KDQogICAgaW5zZXJ0UmVjdCgpOw0KICA8L3NjcmlwdD4NCjwvYm9keT4NCjwvaHRtbD4N Cg==