html - 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) 元素，以便所有旋转都发生在背景平面的前面。

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

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