网站反复重新加载，然后在 iPhone 4 上崩溃：iOS 8.0.2 和 iOS 8.1.2答案

【问题标题】：Website repeatedly reloads, then crashes on iPhone 4: iOS 8.0.2 & iOS 8.1.2网站反复重新加载，然后在 iPhone 4 上崩溃：iOS 8.0.2 和 iOS 8.1.2
【发布时间】：2015-06-15 14:58:37
【问题描述】：

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

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 会继续刷新页面，每次读取“此网页出现问题，因此已重新加载”，直到最终崩溃并读取“[网站 URL] 反复出现问题”。我已经确保我的 JavaScript/jQuery 在语法上是正确的（以及在 Safari 设置中关闭 JavaScript 加载网页 - 同样的问题），清除缓存，重新启动 iPhone，并且无法想象还有什么可能导致问题。网页很小，总文件大小约为 300kb，并且只有一些相当简单的 DOM 操作。

根据我自己的测试和阅读的内容，这个问题与 iOS 8.0.2 和 8.1.2 无关，但很明显，我的网站属于少数会在操作系统上崩溃的网站，我会想知道究竟是什么导致了问题。

谢谢。

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

【问题讨论】：

标签： ios iphone ios8 safari mobile-safari

【解决方案1】：

简答：

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

长答案

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

幸运的是，我能够在我的 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; }
}

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

当我进一步删除 CSS 属性时，崩溃似乎与 font-size 动画隔离。但是，它不似乎与@font-face 网络字体相关联，或者如果您使用不同的单位 (em/px/pt) 指定大小。测试的所有条件都导致了相同的崩溃。唯一修复它的是删除我的关键帧块中的任何字体大小更改，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) 上都进行了测试。

【讨论】：

当关键帧包含单位为 em 的字体大小时，移动版 Safari 似乎会崩溃。用 px 表示效果很好。

【解决方案2】：

受@Evan Tishuk 回答的启发，我浏览了我的 CSS，但发现与他不同的是，我没有字体大小的关键帧动画。通过消除过程，我开始删除代码块，从带有供应商前缀的代码块开始，发现这是导致问题的代码：

.qanda{
  filter: blur(0px);
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -o-filter: blur(0px);
  -ms-filter: blur(0px);

  filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');
}

我太傻了。我的网站甚至不需要模糊过滤器，只是我正在玩的一些代码忘记删除。

【讨论】：

经过数小时尝试数十种不同的解决方案（包括上面的关键帧解决方案；添加和 ; 等等）删除“filter:progid:”行也为我解决了这个问题。我确定我过去曾使用 colorzilla.com/gradient-editor/ 进行如此多的渐变......所有这些都会在现代移动设备上引发这个问题，因为该工具关心 IE6-9 用户。如果你关心那个 luddite 少数派（我们应该，对吗？），应该只为他们加载特定的 CSS。

【解决方案3】：

除了所有都指向 CSS 的其他答案之外，我可以报告 JSON 数据对象的复杂 JavaScript 操作也可能导致此错误。具体来说，将大型预计算搜索索引（约 1MB 或更大的 JSON 文件）加载到页面中以供 lunr.js 使用会出现上述故障。

我认为这可能是因为服务器端压缩（传输的 1MB JSON 数据压缩到大约 200kB）但禁用压缩后错误仍然存在，所以我只能假设问题发生在 Safari 内部，同时解析 JSON 数据.

有趣的是，我可以从 JSON 文件加载原始搜索数据（大小与导致崩溃的索引数据相当）并在浏览器中构建 Lunr 搜索索引 - 只是无法从 JSON 加载预先计算的搜索索引文件。

【讨论】：

【解决方案4】：

根据 Evan 和 Jack 的回答，这很可能与 CSS 相关。具体有哪些款式？这可能会有所不同。

我遇到了同样的问题：iPhone4 和 iPhone6 上的 Safari 正在重新加载页面，直到崩溃。站点在 iPad2、iPad Air、iPhone5 和 IOS 模拟器中的所有模拟设备（包括模拟 iPhone4 和 iPhone6）上都很好。

破坏网站的 CSS（OK，LESS）：

ul {
 .transform(translateZ(0));
  a {
    .transform(translateZ(0)); /* Right here, the nested transform */
  }
}

一旦我从 Safari 中删除了嵌套的转换，它就停止了，一切都很好。

【讨论】：

【解决方案5】：

我在使用 ASP.Net 站点时遇到了同样的问题。原来 ViewState 太大了。将一些 ViewState 变量移动到 asp:HiddenField 值为我解决了这个问题。

【讨论】：