iPhone 4上的网站反复刷新，然后崩溃：iOS 8.0.2和iOS 8.1.2

Question

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

从我的测试和阅读中可以发现，问题仅限于iOS 8.0.2和8.1.2，但显然，我的网站是在操作系统上崩溃的少数网站之一，我想知道究竟是什么原因导致了这个问题。

谢谢。

编辑：将其中一个iPhone升级到iOS 8.3-问题仍然存在。此时完全被困住了，非常感谢任何建议。

- Jack Ducasse

Answer 1

简短回答:

检查所有的CSS动画关键帧并删除其中任何字体大小的动画。

详细回答

在"一个问题反复出现"的问题方面，缺乏任何针对开发者的对话，这确实令人失望。今晚我花了一个小时在Google上搜索，偶然发现了你在这里发布的帖子，并在看到时间戳时不得不做出双重反应。// 给你一个高五，同样是热心解决问题的人。

幸运的是，我能够追踪到我的CSS中可能存在的iOS/Webkit错误源头。具体来说，这似乎与Safari如何处理CSS关键帧内的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）指定大小。所有测试条件都导致相同的崩溃。唯一解决问题的方法是删除关键帧块内的任何字体大小更改，例如：

@-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; }
}

可能（也许很有可能）其他动画属性也会引发崩溃，但是这个修复方法对我起作用了，希望它也对你起作用。

附注：我在iOS 8.1.2和8.3（iPad）上测试过。

- Evan Tishuk

---

似乎移动版Safari会在关键帧中使用em单位的font-size时崩溃，使用px则正常。 - cad

Answer 2

受@Evan Tishuk答案的启发，我查看了我的CSS，但与他不同的是，我没有font-size关键帧动画。通过逐步排除法，我开始删除代码块，首先是那些具有供应商前缀的代码块，并发现这段代码引起了问题：

.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');
}

我真是太傻了。在我的网站上根本不需要模糊滤镜，只是一些我玩耍时忘记删除的代码。

- Jack Ducasse

---

尝试了数十种不同的解决方案（包括上面提到的关键帧解决方案；添加<meta name="apple-mobile-web-app-capable" content="yes">和<meta name="viewport" content="user-scalable=no">等），经过多小时后，去掉“filter:progid:”行也解决了我的问题。我确定我以前在 colorzilla.com/gradient-editor/ 上使用了很多渐变...所有这些渐变都因为这个工具关心 IE6-9 用户而在现代移动设备上遇到了这个问题。如果你关心那些技术保守的少数人（我们应该关心，对吧？），应该让某些 CSS 仅针对他们进行加载。 - GlennFriesen

Answer 3

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

我认为这可能是由于服务器端压缩（1MB JSON数据传输时被压缩为约200kB）导致的，但在禁用压缩后错误仍然存在，因此我只能假设问题发生在Safari内部解析JSON数据时。

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

- Tian van Heerden

Answer 4

根据Evan和Jack的答案，这很可能与CSS有关。具体是哪些样式？这可能因人而异。

我也遇到了同样的问题：iPhone4和iPhone6上的Safari会重新加载页面直到崩溃。在iPad2、iPad Air、iPhone5和IOS模拟器中的每个模拟设备上都没有问题（包括模拟的iPhone4和iPhone6）。

导致网站出错的CSS（好吧，是LESS）：

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

一旦我移除了嵌套的转换，Safari就不再出现问题，世界变得美好了。

- RJM

Answer 5

我在使用 ASP.Net 网站时也遇到了同样的问题。结果发现 ViewState 太大了。把一些 ViewState 变量移动到 asp:HiddenField 值中解决了我的问题。

- Chris Stillwell