safari中的动画剪辑路径不起作用

Question

我正在制作一个简单的clip-path属性的css动画，使用基本的inset形状来创建扫描效果。这在Chrome和Firefox中运行良好，但在Safari中效果不佳。

如果我调整Safari的窗口大小，或者执行其他强制重绘的操作，它确实会渲染动画的当前状态。因此，这似乎是动画没有正确重绘的问题。

我认为您需要在clip-path前面加上我的-webkit-，我已经这样做了。

我使用的是最新版本的Safari: 12.1.1

这里有一个小提琴来说明这个问题：https://jsfiddle.net/vwth9mjr/

我希望动画能像在Chrome和Firefox中一样工作。

Safari没有显示错误消息。

Answer 1

将.pane css从固定更新到绝对似乎是可行的：

https://jsfiddle.net/d32bm6jo/5/