Bug 283156 – blur effects on SVG have performance issues

• Status: NEW
• Component: Layout and Rendering

[Karl Dubost]

This was initially reported by Chris Gioran.
https://radiki.dev

He shared with me in private a website illustrating the issue. I will put the URL in the radar for now.

The background of the website is composed of two <g> elements.
Each of them has a blur effect.
The site is working fine on Firefox and Chrome.
But it has difficulties on Safari.

It was initially tested on
* macbook Pro 2017 / Safari 17.1.2
* macbook Pro 2019 / Safari 17.2.1
* iphone 8 plus

[Radar WebKit Bug Importer]

<rdar://problem/139940955>

[Karl Dubost]

The initial report is on https://fosstodon.org/@chrisg/113481753026202265

[Karl Dubost]

```
<div id="my_dataviz"
     data-astro-cid-j7pv25f6=""
     style="">
     <svg id="the_svg"
         width="90%"
         height="100%"
         data-astro-cid-j7pv25f6=""
         style="">
        <defs data-astro-cid-j7pv25f6=""
              data-svg-origin="0 0"
              style="transform-origin: 0px 0px;">
            <filter id="blurMe"
                    data-astro-cid-j7pv25f6=""
                    style="">
                <feGaussianBlur in="SourceGraphic"
                                stdDeviation="5"
                                data-astro-cid-j7pv25f6=""
                                style=""></feGaussianBlur>
            </filter>
        </defs>
        <g stroke="#999"
           stroke-opacity="0.6"
           filter="url(#blurMe)"
           data-svg-origin="0 0"
           style="transform-origin: 0px 0px; filter: none;">
            <line data-svg-origin="0 0"
                  x1="717.2645053012556"
                  y1="714.7514328171133"
                  x2="666.490933296735"
                  y2="876.8701152878917"
                  style="transform-origin: 0px 0px;"></line>

[lot of line elements]

                  <line data-svg-origin="0 0"
                  x1="717.2645053012556"
                  y1="714.7514328171133"
                  x2="552.148200304569"
                  y2="777.2529753209482"
                  style="transform-origin: 0px 0px;"></line>
        </g>
        <g filter="url(#blurMe)"
           data-svg-origin="-36.203125 -25"
           style="transform-origin: 0px 0px; filter: none;">
            <g onmousedown="this.parentElement.appendChild(this)"
               data-svg-origin="-30.953125 -25"
               transform="translate(666.490933296735,876.8701152878917)"
               style="transform-origin: 0px 0px;">
                <circle stroke="#3330e4"
                        stroke-opacity="0.5"
                        stroke-width="1.5"
                        r="25"
                        fill="white"
                        data-svg-origin="-25 -25"
                        style="transform-origin: 0px 0px;"></circle>
                <g style="transform-origin: 0px 0px;"
                   data-svg-origin="-30.953125 -1.78125"><text text-anchor="middle"
                          alignment-baseline="center"
                          font-size="0.35em"
                          font-weight="bold"
                          data-svg-origin="-30.953125 -1.78125"
                          style="transform-origin: 0px 0px;">
                        <tspan x="0"
                               dy="0.44999999999999996em"
                               data-svg-origin="-30.953125 -1.78125"
                               style="transform-origin: 0px 0px;">AVIN</tspan>
                        <tspan x="0"
                               dy="1.55em"
                               data-svg-origin="-30.953125 -1.78125"
                               style="transform-origin: 0px 0px;">INTERNATIONAL...</tspan>
                    </text></g>
            </g>

[A lot of g elements]

            <g onmousedown="this.parentElement.appendChild(this)"
               data-svg-origin="-25 -25"
               transform="translate(797.8108921089066,470.5080665719243)"
               style="transform-origin: 0px 0px;">
                <circle stroke="#3330e4"
                        stroke-opacity="0.5"
                        stroke-width="1.5"
                        r="25"
                        fill="white"
                        on="p_30"
                        data-svg-origin="-25 -25"
                        style="transform-origin: 0px 0px; filter: brightness(200%); fill: rgb(186, 185, 246);"></circle>
                <g style="transform-origin: 0px 0px;"
                   data-svg-origin="-20.625 -1.78125"><text text-anchor="middle"
                          alignment-baseline="center"
                          font-size="0.35em"
                          font-weight="bold"
                          data-svg-origin="-20.625 -1.78125"
                          style="transform-origin: 0px 0px;">
                        <tspan x="0"
                               dy="0.44999999999999996em"
                               data-svg-origin="-20.625 -1.78125"
                               style="transform-origin: 0px 0px;">NEVINE</tspan>
                        <tspan x="0"
                               dy="1.55em"
                               data-svg-origin="-20.625 -1.78125"
                               style="transform-origin: 0px 0px;">HOLDINGS...</tspan>
                    </text></g>
            </g>
        </g>
    </svg></div>          
```