网站崩溃/未在iPhone 5s的iOS 9上加载

Question

我要把这根头发撕掉。

在运行iOS 7.1.1的iPhone 5s上，有关我的网页的所有信息都很好：

出于安全目的删除了网站链接。

但是，在运行iOS 9的iPhone 5s上，出现以下错误，该错误完全破坏了/无法加载页面，从而使其完全无法使用：

"A problem occurred with this web page so it was reloaded"

我在高空搜寻有关此问题的想法，但似乎没有真正的直接原因。

我在试错测试中注意到的一件事是，如果删除主app.min.css样式表，它将至少加载页面（DOM）。

但是，如果我随后加载CSS但这次使用的是空文件，则会出现错误。 因此，它似乎与我的CSS本身无关，仅与链接到它的行为无关。

我经历了尝试删除所有脚本，图像等...没有运气。 删除CSS与解决问题的过程差不多，但是即使使用空白CSS文件，也会出现问题。 对我来说完全是无稽之谈。

所以总结一下我所知道的：

1. 这似乎是由于包含我的app.min.css样式表而触发的。
2. 即使CSS作为一个完全空白的文件包含在内，该错误仍然会发生。
3. 删除所有JS不能解决问题。
4. 它发生在任何页面上，而不仅仅是登录页面或任何特定区域。 在我的旧版iOS上运行良好，但在iPhone 5s上的新版9+上运行不佳

希望您能提供帮助。 我很想提供隔离的代码示例，但是由于这个问题是如此“复杂”，所以我不知道该写什么作为测试用例。

如果有什么明显的问题，您可以在我想知道的开发工具中注意到。 谢谢！

这也是有问题的iOS模拟器的屏幕截图：

Answer 1

经过大量调试后，我发现有问题的CSS完全导致iOS9 +上的Webkit浏览器崩溃并烧毁（Safari和Chrome）：

::-webkit-scrollbar-thumb:window-inactive {
    // Properties
}

现在，删除该行可消除错误并正确加载页面。

这个问题很难调试，因为iPhone大量缓存了CSS文件。 为了解决这个问题，在测试时通过在末尾附加一个随机查询字符串（PHP）来缓存破坏CSS的方法：

<link rel="stylesheet" href="/path/to/css/file.css?refresh=<?php echo md5(rand()); ?>">

记住在调试完成后将其删除，以便可以利用缓存。

Twitter帖子在这里分享： https : //twitter.com/michaelpumo/status/669478677600669696

希望这对有人有所帮助。 真是痛苦！

Answer 2

似乎您的网站仅在Google Chrome上打开。 Safari崩溃了。 在Mozilla Firefox上打开显示了一些信息。

我在控制台可downloadable font: download not allowed (font-family: "Tiempos Regular" style:normal weight:normal stretch:normal src index:1): content blocked source: http://example.com/wp-content/themes/future-cities/dist/fonts/TiemposTextWeb-Regular.woff上看到此错误downloadable font: download not allowed (font-family: "Tiempos Regular" style:normal weight:normal stretch:normal src index:1): content blocked source: http://example.com/wp-content/themes/future-cities/dist/fonts/TiemposTextWeb-Regular.woff

在app.min.css 。

@font-face {
    font-family: "Tiempos Regular";
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/TiemposTextWeb-Regular.eot?#iefix") format("embedded-opentype"),url("../fonts/TiemposTextWeb-Regular.woff") format("woff")
}

从CSS中取出该字体，然后尝试。 它应该工作。

希望能帮助到你！