网站反复重新加载,然后在iPhone 4上崩溃:iOS 8.0.2和iOS 8.1.2

vq8itlhq  于 2023-08-08  发布在  iOS
关注(0)|答案(5)|浏览(136)

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

  • Windows 8.1 - Chrome,Firefox,Opera,IE。
  • OSX约塞米蒂- 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,无法想象还有什么可能导致这个问题。这个网页很小,文件大小只有300 kb左右,只有一些相当简单的DOM操作。
从我自己的测试和我所读到的内容来看,这个问题被隔离到iOS 8.0.2和8.1.2,但很明显,我的网站是在操作系统上崩溃的少数网站,我想知道到底是什么导致了这个问题。

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

vu8f3i0k1#

简答

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

长答案

缺乏任何以开发人员为中心的关于“一个问题反复出现在……”问题的对话肯定是令人失望的。经过一个小时的谷歌搜索今晚我偶然发现你的帖子在这里,不得不做双重采取时,我看到的时间戳。// High five fellow trouble-shooter.
幸运的是,我能够在我的CSS中找到这个iOS/Webkit bug的潜在来源。具体来说,它似乎与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)指定大小相关联。所有测试条件均导致相同的碰撞。唯一修复它的是删除我的关键帧块中的任何字体大小更改,例如:

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

z6psavjg

z6psavjg2#

受到@Evan Tishuk的回答的启发,我搜索了我的CSS,但发现与他不同,我没有字体大小的关键帧动画。通过消除过程,我开始删除代码块,从带有vendor-prefix的代码块开始,并发现这是导致问题的代码:

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

字符串
我真傻。模糊滤镜在我的网站上甚至都不需要,只是一些代码,我在玩,忘了删除。

jhdbpxl9

jhdbpxl93#

除了其他答案都指向CSS是原因之外,我可以报告JSON数据对象的复杂JavaScript操作也会导致此错误。具体来说,将一个大的预先计算的搜索索引(一个~ 1 MB或更大的JSON文件)加载到一个页面中以用于lunr.js将表现出上述失败。
我认为这可能是因为服务器端压缩(1 MB的JSON数据被压缩到大约200 kB),但在禁用压缩后错误仍然存在,所以我只能假设问题发生在Safari内部,而解析JSON数据。
有趣的是,我可以从JSON文件加载原始搜索数据(大小与导致崩溃的索引数据相当),并在浏览器中构建Lunr搜索索引--只是不能从JSON文件加载预先计算的搜索索引。

pvabu6sv

pvabu6sv4#

根据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 */
  }
}

字符串
一旦我删除了那个嵌套的transfrom Safari就停止了frekin‘out,世界上一切都好了。

xxhby3vn

xxhby3vn5#

我在使用ASP.NET站点时遇到了同样的问题。结果是ViewState太大。把一些ViewState变量移到asp:HiddenField值中,我就解决了这个问题。

相关问题