[Webkit-unassigned] [Bug 247241] New: Animating a single SVG path with stroke dashoffset uses unreasonable amount of CPU / GPU resources

[bugzilla-daemon at webkit.org]

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

            Bug ID: 247241
           Summary: Animating a single SVG path with stroke dashoffset
                    uses unreasonable amount of CPU / GPU resources
           Product: WebKit
           Version: Safari 16
          Hardware: All
                OS: All
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: SVG
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: alexandernst at gmail.com
                CC: sabouhallawa at apple.com, zimmermann at kde.org

I have a very simple border created with a SVG path. If I try to animate it with it's stroke-dashoffset property, the GPU usage of Safari spikes up to 15%. This seems excessive given the fact that I'm animating a single stroke.

Steps to reproduce:

1. Create a test page with the code that I'm providing
2. Open your OS's task manager and find all Safari's processes
3. Using the mouse, hover over the square and check how the CPU / GPU usage increases


CSS:

.outer {
  border-radius: 5px;
  position: relative; 
  width: 300px;
  height: 300px;
  border: 1px solid gray;
}

.border-path {
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  position: absolute;
  top: -5px;
  left: -5px;
  stroke-width: 5;
  stroke-dasharray: 8;
  stroke-dashoffset: 1000;
  stroke-opacity: 0;
  fill: transparent;
}

.outer:hover > .border-path {
  stroke: red;
  stroke-opacity: 1;
  animation: draw 30s linear infinite forwards;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}


HTML:

<div class="outer">
  <svg class="border-path">
    <rect x="0" y="0" width="100%" height="100%" />
  </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/20221030/b723acf9/attachment.htm>