Safari 中的 CSS 旋转动画中断

Question

我今天在 Safari 中偶然发现了一个奇怪的行为，我不知道是什么导致了这个问题。

在创建以特定模式旋转 SVG 元素的动画时，在 Chrome 中一切正常，Safari 在每个动画步骤中只显示一半的 SVG。

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

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

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

Chrome（预期）：

Safari（意外）：

Answer 1

好的，显然我已经解决了这个问题。

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

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

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

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