我有一个使用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
  • android
  • Windows Mobile
  • 所有Windows和Mac桌面版Chrome,Safari,IE,Firefox

  • 如时间线所示,没有明显的内存泄漏,包括页面加载和滚动浏览站点内容,这些内容动态地向dom中添加了javascript对象和元素:
    javascript - iOS 9 Safari Webkit仅在iPad上崩溃(iPhone正常)-LMLPHP

    导致问题的一般步骤:
  • 收集包含元素的现有DOM元素,该元素带有css backgound-image:url()
  • 从DOM中删除现有元素。
  • 然后将元素插入到新容器元素
  • 中的DOM中

    最佳答案

    我相信我发现了这个错误...

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

  • 删除了translate3d可以解决此问题,但是性能是
    可怕,仍然随机崩溃。
  • 删除背景图片可以完全解决问题,但是
    需求。
  • 最后,我能够保留背景图像和translate3d
    只要我删除了z-index。

  • 简而言之,如果仅在ipad上的Safari 9中出现一致的崩溃,请尝试删除所有负的z-index,看看是否可以解决该问题。

    10-05 20:53
    查看更多