CSS rotation animation breaks in Safari

Question

I stumbled upon a weird behaviour in Safari today, and I cannot figure out what causes the problem.

When creating an animation that rotates an SVG element in a certain pattern, with everything working perfectly fine in Chrome, Safari only shows half the SVG on every animation step.

When I remove the background-color: white; from the .container element, everything works fine. How would a background color be causing such a behaviour?

Here's a demo video as well as the corresponding JSFiddle:

JsFiddle: https://jsfiddle.net/04zgmbup/

Chrome (expected):

Safari (unexpected):

Answer 1

Okay, so apparently I got this problem figured out.

Safari seems to be handling the container background as a plane. This means that when the item rotates, one half will always get rotated behind the container, which has a white background color which covers the element itself.

I still do not know why other browsers do not behave like this. A possible solution for Safari could be to translateZ(width /2) the element, so that all rotations happen in front of the background plane.

Here's the updated fiddle, working in Safari: https://jsfiddle.net/04zgmbup/1/

The problem can be visualized nicely by giving the container a semi-transparent background color. In the below recording, one can clearly see that half the circle gets rotated behind the container.