javascript - iOS 9 safari webkit 仅在 iPad 上崩溃(iPhone 工作正常)

Question

我有一个使用 python/django 后端的网络应用程序，并在前端使用了大量的 CSS3 动画和大量的 javascript。这个问题让我有点抓狂，所以我只是想看看是否有人对此有任何想法。

该站点在运行 iOS 9.2 的 iPad mini 上使 webkit 崩溃。 safari 和 chrome 都崩溃了。 Safari 提供以下通知:

A problem occurred with this webpage so it was reloaded

崩溃发生在内容显示之后，还没有触及任何东西。有时它会重新加载直到:

A problem repeatedly occurred on ...

其他时候，它最终会加载页面，然后在滚动页面后崩溃。在极少数情况下，网站会在清除浏览器缓存后正常运行。

它在这些设备上完美运行:

• iPhone 3 iOS 7
• iPhone 4 iOS 7
• iPhone 5 iOS 9.2
• iPhone 6 iOS 9.2
• 安卓
• Windows 手机
• 所有 Windows 和 Mac 桌面 Chrome、Safari、IE、Firefox

没有明显的内存泄漏，如时间轴所示，包括页面加载和滚动站点内容，动态地将 javascript 对象和元素添加到 dom:

导致问题的一般过程:

• 收集包含带有 css backgound-image:url() 元素的现有 DOM 元素
• 从 DOM 中删除现有元素。
• 然后将元素插入到新容器元素中的 DOM 中

Answer 1

我相信我找到了错误...

显然 Safari 9(仅限 iPad)在应用 css 时不喜欢它 transform:translate3d();在包含 css 的元素上 background-image:url(),用z-index:-1;

• 删除 translate3d 改善了问题，但性能 太可怕了，仍然会随机崩溃。

• 删除背景图像完全解决了这个问题，但是 要求。

• 最后，我能够保留背景图像和 translate3d 只要我删除了 z-index。

简而言之，如果您在 ipad 上的 Safari 9 中遇到一致的崩溃，请尝试删除所有负 z-index 并查看是否可以解决问题。