Safari中的CSS旋转动画中断

Question

我偶然发现了今天在Safari中发生的一种怪异行为，我无法弄清楚是什么原因导致了问题。

创建动画以某种模式旋转SVG元素时，在Chrome中一切正常运行时，Safari在每个动画步骤中仅显示一半的SVG。

当我从background-color: white;元素中删除.container时，一切正常。背景颜色如何引起这种行为？

这是一个演示视频以及相应的JSFiddle：

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

Chrome浏览器（预期）：

Safari（意外）：

Answer 1

好的，显然我已经弄清楚了这个问题。

Safari似乎将容器背景当作飞机处理。 这意味着当旋转项目时，一半将始终在容器后面旋转，该容器具有白色背景色，覆盖了元素本身。

我仍然不知道为什么其他浏览器没有这样的行为。 Safari可能的解决方案是translateZ(width /2)元素，以便所有旋转都发生在背景平面的前面。

这是在Safari中工作的更新的小提琴： https://jsfiddle.net/04zgmbup/1/

通过为容器提供半透明的背景颜色，可以很好地将问题可视化。在下面的记录中，可以清楚地看到一半圆在容器后面旋转。