[Webkit-unassigned] [Bug 196220] New: CSS animation with SVG misaligns when placed on a non-whole number

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=196220

            Bug ID: 196220
           Summary: CSS animation with SVG misaligns when placed on a
                    non-whole number
           Product: WebKit
           Version: Safari 12
          Hardware: Macintosh
                OS: macOS 10.13
            Status: NEW
          Severity: Minor
          Priority: P2
         Component: SVG
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: ryan.whitney at me.com
                CC: zimmermann at kde.org

Created attachment 365909

  --> https://bugs.webkit.org/attachment.cgi?id=365909&action=review

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>

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20190325/c7f8b5b9/attachment.html>