ios - 网站反复重新加载，然后在 iPhone 4 : iOS 8. 0.2 和 iOS 8.1.2 上崩溃

Question

可以看到加载网站时发生的情况的示例 here对于 theverge.com。最新的浏览器和操作系统版本不会出现此类问题:

• Windows 8.1 - Chrome、Firefox、Opera、IE。
• OSX Yosemite - Chrome、Safari。
• Android 4.4 - Chrome、Firefox、Opera、Safari。
• iOS 7.1.2(iPad) - Safari。
• iOS 8.3 (iPhone 5) - Safari。

但是，在两台独立的 iPhone 4S 设备(iOS 8.0.2 和 iOS 8.1.2)上，Safari 会不断刷新页面，每次都显示“problem occurred with this webpage so it was reloaded”，直到最后崩溃并阅读“[网站 URL] 上反复出现问题”。我已确保我的 JavaScript/jQuery 在语法上是正确的(以及在 safari 设置中关闭 JavaScript 的情况下加载网页 - 同样的问题)，清除缓存，重新启动 iPhone 并且无法想象还有什么可能导致问题。该网页很小，总文件大小约为 300kb，只有一些相当简单的 DOM 操作。

根据我自己的测试和阅读的内容，问题只出现在 iOS 8.0.2 和 8.1.2 上，但显然，我的网站是在操作系统上崩溃的少数网站，我会想知道到底是什么导致了问题。

谢谢。

编辑:将其中一部 iPhone 更新到 iOS 8.3 - 问题仍然存在。在这一点上绝对难倒，任何建议将不胜感激。

Answer 1

简答:

检查所有 CSS 动画关键帧并删除这些 block 中的所有 font-size 动画。

长答案

没有任何以开发人员为中心的关于“问题反复发生在...”问题的对话绝对令人失望。今晚在谷歌上搜索了一个小时后，我在这里偶然发现了你的帖子，当我看到时间戳时不得不仔细考虑一下。 //解决问题的高五伙伴。

幸运的是，我能够在我的 CSS 中找到这个 iOS/Webkit 错误的潜在来源。具体来说，这似乎与 Safari 如何处理 CSS keyframes 内的 font-size 动画有关。我的 SASS 中有这样的东西:

@-webkit-keyframes labels-bottom {
    0%   { opacity: 1; color:#888888; top: 0.1em; font-size: 1.5em; }
    20%  { font-size: 1.5em; opacity: 0; }
    30%  { top: 0.1em; }
    50%  { opacity: 0; font-size: 0.85em; }
    100% { top: 4em; opacity: 1; }
}

当我移除整个 block 时，它开始工作。

当我进一步逐一删除 CSS 属性时，崩溃似乎与 font-size 动画无关。但是，它不似乎与 @font-face 网络字体相关联，或者如果您使用不同的单位 (em/px/pt) 指定大小。所有测试条件都导致了同样的崩溃。唯一修复它的方法是删除我的关键帧 block 中的任何字体大小更改，la:

@-webkit-keyframes labels-bottom {
    0%   { opacity: 1; color:#888888; top: 0.1em; }
    20%  { opacity: 0; }
    30%  { top: 0.1em; }
    50%  { opacity: 0; }
    100% { top: 4em; opacity: 1; }
}

其他动画属性有可能(而且很可能)会触发崩溃，但此修复对我来说绝对有效，我希望它对你也有效。

PS:我在 iOS 8.1.2 和 8.3 (iPad) 上测试过这个。