网站在 iPhone 5 秒 iOS 9 时崩溃/未加载

Question

看到这个我都快崩溃了。

在我的 iPhone 5s 运行 iOS 7.1.1 关于我的网页的一切都很好：

网站 LINK 出于安全目的已删除。

然而，在 iPhone 5s 运行 iOS 9 我收到以下错误，完全破坏/不加载页面，使其完全无法使用：

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

我四处寻找关于这个的想法，但似乎没有真正的直接原因。

我在反复试验中注意到的一件事是，如果我删除主 app.min.css 样式表，它至少会加载页面 (DOM)。

但是，如果我随后加载 CSS 但这次加载的是一个空文件...则会出现错误。所以看起来它与我的 CSS 本身无关 - 只是链接到它的行为。

我已经完成并尝试删除所有脚本、图像等...但没有成功。删除 CSS 与我解决问题的时间差不多，但即使 CSS 文件为空，问题也会出现。这对我来说毫无意义。

总结一下我所知道的：

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

我希望你能帮上忙。我很乐意提供独立的代码示例，但由于这个问题是如此 'out there'，我不知道该写什么作为测试用例。

如果您可以在开发工具中注意到任何明显的东西，我很想知道。谢谢！

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

Answer 1

您的网站似乎只能在 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 中取出那个字体，然后试试。它应该有效。

希望对您有所帮助！

Answer 2

经过多次调试，我发现了 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()); ?>">

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

推特post分享：https://twitter.com/michaelpumo/status/669478677600669696

希望这对外面的人有所帮助。好痛啊！

网站在 iPhone 5 秒 iOS 9 时崩溃/未加载

Website crashing / not loading on iOS 9 on iPhone 5s

javascript

css

iphone

frontend

ios