SVG animation bug in safari 11

Question

As you may know there is a new Safari released last night: Safari 11. And this last version create a bug on SVG animation that was working fine on safari 10 or still work on

Answer 1

You are using percentage values for translate() transformations. That raises the question: percentage of what?

Google Chrome and Safari 10 answer the question with "the bounding box of the transformed element". That is from the 2013 "Working Draft" of the CSS Transforms definition

Firefox and Safari 11 answer with "the size of the local viewport". (in your case, the size of the <svg> element). That is from the latest "Editor's Draft" version of the CSS Transforms definition.

You could try to restore the previous behavior by setting transform-box:fill-box.

The better solution is not to use relative, but pixel values. Since your animated elements are all in the range of 25px width and height, dividing the current value by 4 and exchanging % for px should give you a decent start for fine-tuning these values.