Not so smooth SVG animation in Firefox due to coordinates

I had a hard time making a simple stroke-dasharray and stroke-dashoffset animation with keyframes animation. While it was perfectly in Chrome, Firefox wouldn’t make it smooth!

It even got a weird behavior, I could make the animation smooth by moving the mouse over it… whaaat?

Here’s the link to the codepen

Weird right?

Issue was the positioning of the shape itself in my SVG file. I had a file with lots of shapes, and some of them had big numbers for their coordinates. Extracting those shape even one by one still give you those big numbers, and it seems that Firefox doesn’t like that at all for animation purpose… (even if you can bypass that bug by moving the mouse, obvious right?)

So by putting the position to a more typical coordinates like [0,0], animation is now smooth:

Not sure why it’s doing this in Firefox while working perfectly in Chrome (energy saving related maybe?), but it makes me want to have an option in SketchApp to extract SVG code from an absolute position. Maybe there’s a plugin for that!


Your email address will not be published. Required fields are marked *