CSS animation with SVG misaligns when placed on a non-whole number

• Component: SVG
• Status: NEW ---

Created attachment 365909 [details]
what it looks like when the element is placed at a non-whole number (i.e. top: 100.33px, this causes percentages to be unreliable as it can land between whole numbers);

I have a 50 PX SVG of a circle, it rotates 360deg from a CSS animation. It loads and spins correctly when placed on the page. However if it's positioned with a percentage (i.e. top: 20%;) it will at times wobble vertically. This happens unreliably, but seems to be caused by being positioned at a non-whole number. A constant top: 100px; will be fine, but 100.33 will reintroduce the wobble. This causes any percentage-based layout to render SVG animations unreliably. (Cannot repro in chrome.)

Here's some sample code:

  #loadingSpinner {
    top: 20%;
    left: 0;
    right: 0;
    position: fixed;
    display: flex;
    justify-content: center;
    cursor: wait;
  }

  #svg-spinner-container {
    width: 65px;
    height: 65px;
    display: flex;
    justify-content: center;
    align-items: center;
    
  }

  #svg-spinner {
    width: 50px;
    height: 50px;
    -webkit-animation: svg-spinner-animation 1s linear infinite;
    animation: svg-spinner-animation 1s linear infinite;
  }

  @-webkit-keyframes svg-spinner-animation {
    100% {
      -webkit-transform:rotate(360deg);
    }
  }

  @keyframes svg-spinner-animation {
    100% {
      transform:rotate(360deg);
    }
  }



<div id="svg-spinner-container">
    <svg id="svg-spinner" viewBox="0 0 50 50">
        <style>#tail{fill:url(#fade)}#head{fill:#616570}stop{stop-color:#616570}</style>
        <linearGradient id="fade" x2="50" y1="25" y2="25" gradientUnits="userSpaceOnUse">
            <stop offset="0" stop-opacity="0"></stop>
            <stop offset=".15" stop-opacity=".04"></stop>
            <stop offset=".3" stop-opacity=".16"></stop>
            <stop offset=".45" stop-opacity=".36"></stop>
            <stop offset=".61" stop-opacity=".64"></stop>
            <stop offset=".76"></stop>
        </linearGradient>
        <path id="head" d="M0 25a25 25 0 1 0 50 0h-3.9a21.1 21.1 0 1 1-42.2 0"></path>
        <path id="tail" d="M50 25a25 25 0 0 0-50 0h3.9a21.1 21.1 0 1 1 42.2 0"></path>
    </svg>
</div>

[Radar WebKit Bug Importer]

<rdar://problem/49414196>

[Said Abou-Hallawa]

Created attachment 366277 [details]
test case

[Ahmad Saleem]

I am able to reproduce this bug in Safari 15.5 on macOS 12.4 using attached test case and first circle is wobbly as shown in the attached video as reference as well. All other browsers (Chrome Canary 105 and Firefox Nightly 104) render it fine and the first circle is not wobbly in them. If I am testing it incorrectly, please retest accordingly. Thanks!