Bug 247241 – Animating a single SVG path with stroke dashoffset uses unreasonable amount of CPU / GPU resources

• Status: NEW
• Component: SVG

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>

Chrome bug report: https://bugs.chromium.org/p/chromium/issues/detail?id=1379706

Firefox bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=1798201

[Radar WebKit Bug Importer]

<rdar://problem/102011123>