网站崩溃/无法在 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 文件。为了解决这个问题，在测试时通过在末尾附加一个随机查询字符串来缓存你的 CSS（PHP）：

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

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

推特在此分享：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

在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 中取出该字体，然后尝试一下。它应该可以工作。

希望对你有帮助！