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

从我自己的测试和我所读到的内容来看,这个问题与iOS 8.0.2和8.1.2相关,但显然,我的网站是少数几个在操作系统上崩溃的网站,我想知道究竟是什么导致了这个问题.

谢谢.

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

Answer 1

简答:

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

答案很长

缺乏任何以开发者为中心的关于"A问题反复发生......"问题的对话肯定令人失望.今晚在谷歌搜索了一个小时之后,我在这里偶然发现了你的帖子,当我看到时间戳时不得不做双重拍摄.// High five fellow trouble-shooter.

幸运的是,我能够在我的CSS中找到这个iOS/Webkit错误的潜在来源.具体来说,它似乎与Safari如何处理font-sizeCSS内部的动画有关keyframes.我的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-faceWeb字体无关,或者您使用不同的单位(em/px/pt)指定大小.所有测试条件都导致同样的崩溃.修复它的唯一方法是删除我的关键帧块中的任何字体大小更改,a:

@-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)上测试了这个.

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

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

Answer 3

除了所有指向CSS的其他答案之外,我还可以报告JSON数据对象的复杂JavaScript操作也会导致此错误.具体来说,将一个大的预先计算的搜索索引(一个~1MB或更大的JSON文件)加载到一个页面以便与lunr.js一起使用将会出现上述故障.

我认为这可能是因为服务器端压缩(1MB JSON数据传输压缩大约200kB)但是在禁用压缩后错误仍然存​​在,因此我只能假设在解析JSON数据时Safari内部发生了问题.

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