Skip to main content
seanmcp.com

Fix SVG CSS animation issue in Safari


Safari 16 has trouble with CSS animations on SVG child elements, but you can resolve them by using a combined transform property.

Setup: You have an SVG that needs separate animations for its path and rect elements. Applying a single transform to the elements works, but combining multiple transforms results in nondeterministic animation bugs:

@keyframes worksInSafari {
  from {
    scale: 0;
  }
  to {
    scale: 1;
  }
}

@keyframes brokenInSafari {
  from {
    rotate: 0deg;
    scale: 0;
  }
  to {
    rotate: 20deg;
    scale: 1;
  }
}

The fix: You can fix this by combining your transformations into multiple functions on a single transform property:

@keyframes fixedInSafari {
  from {
    transform: rotate(0deg) scale(0);
  }
  to {
    transform: rotate(20deg) scale(1);
  }
}

Try it out:

See the Pen Safari CSS animation SVG bug by Sean McPherson (@SeanMcP) on CodePen.

Takeaway: Individual properties for CSS transforms are nice, but they can cause issues with SVG animations in Safari. The safer option seems to be sticking with a single transform property for now.

Read more: