Constant page rerendering because of the animated icon in the SVG sprite

[th0r]

We have this animated SVG icon in our project:

<svg width="28" height="28" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform-origin:50% 50%">
  <style>@keyframes spin {
           0% {
             stroke-dasharray: 85;
             stroke-dashoffset: 80;
             transform: rotate(0deg) scale(.91)
           }
           to {
             stroke-dasharray: 85;
             stroke-dashoffset: -80;
             transform: rotate(-381deg) scale(.91)
           }
         }</style>
  <path fill-rule="evenodd" clip-rule="evenodd"
    d="M14 28C6.268 28 0 21.732 0 14 .01 6.271 6.271.01 14 0c7.732 0 14 6.268 14 14s-6.268 14-14 14zM3.5 14c0 2.154.648 4.156 1.76 5.823L19.82 5.264A10.462 10.462 0 0 0 14 3.5H14C8.2 3.5 3.5 8.201 3.5 14zm4.677 8.74L22.736 8.18A10.465 10.465 0 0 1 24.5 14h-.002c0 5.799-4.701 10.5-10.5 10.5-2.152 0-4.155-.648-5.82-1.76z"
    fill="#FFD9AD"/>
  <path style="transform-origin:50% 50%;animation:1s spin cubic-bezier(.25,.65,.75,.35) reverse infinite"
    d="M27.5 14A13.5 13.5 0 1 0 .498 14 13.5 13.5 0 0 0 27.5 14h0z" stroke="#E67009" stroke-dasharray="85"
    stroke-dashoffset="80" stroke-width="3.8" stroke-linecap="round"/>
</svg>

The thing is both Chrome and Safari animate it's <symbol> within the parent SVG-sprite despite the fact that it has position: absolute; width: 0; height: 0 styles:

Here is what Chrome's Performance tab shows:

Replacing the sprite's styles with a single display: none property fixes the problem:

So I wonder what is the reason in hiding a sprite using position: absolute; width: 0; height: 0? I've checked display: none and it works fine in the latest versions of Chrome, FF and Safari and even in IE 11.