css - Mobile Safari，CSS 动画在导航时卡住

Question

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

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

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

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

Answer 1

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

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

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

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