移动 Safari，Css 动画在导航时冻结答案

【问题标题】：Mobile Safari, Css animations freeze on navigation移动 Safari，Css 动画在导航时冻结
【发布时间】：2020-01-11 22:19:29
【问题描述】：

所以我正在为客户开发一个移动网站，并添加了一个 css 加载动画，当用户浏览页面或 ajax 加载时触发。

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

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

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

【问题讨论】：

标签： css animation mobile safari css-animations

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

如果适合您的情况，显然有一种解决方法：使用transform 而不是所有其他属性。见https://stackoverflow.com/a/53178319/647845

【讨论】：