Bug 247241 - Animating a single SVG path with stroke dashoffset uses unreasonable amount of CPU / GPU resources
Summary: Animating a single SVG path with stroke dashoffset uses unreasonable amount o...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: Safari 16
Hardware: All All
: P2 Normal
Assignee: Nobody
URL: https://jsfiddle.net/js9L023x/show
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2022-10-30 06:51 PDT by alexandernst
Modified: 2023-05-21 05:42 PDT (History)
5 users (show)

See Also:

Attachments
Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description alexandernst 2022-10-30 06:51:41 PDT 
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>
Comment 2 Radar WebKit Bug Importer 2022-11-06 05:52:17 PST 
<rdar://problem/102011123>