移动 Safari、CSS 动画在导航上冻结

Question

因此，我正在为客户开发一个移动网站，并添加了一个 css 加载动画，该动画在用户导航页面或 ajax 加载时触发。

动画在 Chrome 中工作正常，但在 IOS 中，我发现在触发导航后（通过 window.location.href 或仅单击锚标记），加载动画就会冻结。这种情况发生在调用开始时，而不是在页面加载之后，因此在相当长的时间内，CSS 没有执行任何操作，并且网站看起来像是挂在了某些东西上。我还要补充一点，当我只是进行 ajax 调用时，动画可以正常工作。

与此同时，我在动画加载和导航实际发生之间设置了延迟，这对网站的外观和感觉有所帮助，但效果不是很好。

关于为什么会发生这种情况有任何解决方案或想法吗？

Answer 1

触发导航后动画冻结似乎是 Webkit 浏览器的普遍问题。

参见https://bugs.webkit.org/show_bug.cgi?id=16177

如果您可以通过 Ajax/XHR 发送请求，则有一个解决方法。然后动画将继续播放。您可以在收到后端服务的 200/ok 响应后触发导航。

如果您加载整个下一页并通过 Javascript 交换内容，您可能需要注意浏览器历史记录 API，即为交换的页面添加一个条目。

Answer 2

如果适合您的情况，显然有一个解决方法：使用

transform

而不是所有其他属性。请参阅https://stackoverflow.com/a/53178319/647845

Answer 3

我遇到了类似的问题，在我的例子中，动画使用了

animation-direction: reverse

，这就是出于某种原因的问题。除了 Safari 之外，动画在其他地方都有效。删除反向后，动画停止冻结。