Bug 298217 – animateTransform causes continuous style recalculation, even if the svg is hidden

• Status: NEW
• Component: SVG

[Haroen Viaene]

Created attachment 476583 [details]
safari timeline view showing an every second recalculation

When I have a hidden svg like this:

```
<div hidden>
    <svg viewBox="0 0 100 100" width="20" height="20">
        <circle cx="50" cy="50" fill="none" r="35" stroke="currentColor"
                stroke-dasharray="164.93361431346415 56.97787143782138" stroke-width="6">
            <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s"
                              values="0 50 50;90 50 50;180 50 50;360 50 50"
                              keyTimes="0;0.40;0.65;1"></animateTransform>
        </circle>
    </svg>
</div>
```

The timelines tab on Safari shows a style and layout recalculation every second, even though the svg isn't displayed. This is not the case in Chrome or Firefox, who both likely opt out of rendering the svg if it's invisible.

This can be reproduced in https://codepen.io/Haroenv/pen/bNVQLgP

Possibly related issues:
- https://bugs.webkit.org/show_bug.cgi?id=53089
- https://bugs.webkit.org/show_bug.cgi?id=19118


Issue came to my attention in https://github.com/algolia/autocomplete/issues/1322#issuecomment-3239937658

[Radar WebKit Bug Importer]

<rdar://problem/159647563>