Question

我正在开发一个网站，最近在我的iPhone X上进行测试时遇到了问题-该网站无法加载。

Safari尝试加载它，然后报告错误“此Web页面由于发生问题而被重新加载”，并且经过几次尝试后，它放弃了并报告“反复发生问题”。 iPhone上的Chrome浏览器也无法加载该网站。

目前，我无法公开共享该网站，但chrome桌面控制台中未报告任何错误。实际上，该网站可以在我的台式机，笔记本电脑，旧版iPhone 6和5s，朋友三星android以及我测试过的其他15台随机计算机和电话上正常运行。它还可以在xCode模拟器中正常加载。但这在我的iPhone X上不起作用。

我对SO和互联网的总体研究使我相信此错误通常是由于内存使用过多所致，但是台式机Chrome浏览器报告的内存使用高峰仅在20mb。该网站也可以在我的劣质iPhone 5s上正常加载。

我已经清除了iPhone X上的野生动物园和Chrome缓存，打开/关闭了阻止cookie，重置网络设置并重新启动了手机。

我担心的是，如果我的iPhone X无法加载该网站，毫无疑问，其他用户也会遇到问题，即使我测试过的20种其他设备都可以正常工作。

有人知道这里发生了什么吗？

Answer 1

我花了很多钱来调试类似的问题。

对我来说，这是由于我正在使用Vuetify，并且有2个文本字段都设置了autofocus属性。从元素中删除多余的autofocus对我来说是固定的。

Answer 2

我已经通过假设这确实是内存问题并将“显示：无”设置为在视口中不可见的元素（通过使用窗口滚动事件）来“解决”。

https://medium.com/talk-like/detecting-if-an-element-is-in-the-viewport-jquery-a6a4405a3ea2

这修复了我的iPhone X上的野生动物园崩溃的问题。但是，这并不能解释为什么当Web应用程序消耗的内存不足20mb，并且在任何其他功能较弱的设备上都可以正常运行时，为什么首先在功能强大的设备上发生我能找到。

Answer 3

当我尝试以“高性能”模式（在three.js场景中使用渲染器上的powerPreference属性）访问webgl上下文时，在Safari中看到了相同的错误消息。

删除高性能模式可以加载我的网页。

Answer 4

我遇到了类似的问题：

在我的网站上（仅在特定页面上）iOS野生动物园显示错误消息“在我的页面URL上反复发生问题”，但控制台中没有任何错误。在所有台式机浏览器上，此页面都可以正常运行，在所有Android手机上也可以，但是在iOS Safari页面上显示错误...

经过数小时的调查，我发现问题出在CSS属性上

height: intrinsic;

真的很奇怪，因为此属性仅在桌面Safari上可以正常使用，在其他浏览器上只是被忽略了。但是移动Safari死了...

所以我更改了此CSS属性，并且所有内容都已修复：）

希望这可以帮助某人节省几个小时的调试时间：）

Answer 5

我今天遇到了这个问题，想看看会导致这种情况发生的MRE。在至少两个autofocus控件上设置了<input>属性后，似乎要求iOS 14上的Safari和Chrome都崩溃，然后请求和使用JavaScript进行控制。我能够确认不会在iOS <= 13上发生崩溃。

在macOS上的Chrome 87和Safari 13.1也未受影响。

崩溃是否发生取决于何时请求焦点。在“窗口加载”事件中，一切都会继续进行。在“准备好文档”处理程序中或在文档末尾提出要求时，情况会变糟。

在多个元素上设置autofocus并没有多大意义，但浏览器不应崩溃。 JavaScript后备可用于为autofocus属性的browsers that lack support提供一致的UX。明显的解决方法是删除所有有冲突的autofocus属性。

/*
// Load event on window object: NO CRASH
window.addEventListener('load', (e) => document.querySelector('input[name="field_1"]').focus());

// DOMContentLoaded event on document object: CRASH
document.addEventListener('DOMContentLoaded', (e) => document.querySelector('input[name="field_1"]').focus());
*/

// End of document script: CRASH
document.querySelector('input[name="field_1"]').focus();

<!DOCTYPE html>
<html>
<body>
<form>
<p><label>First field<br><input type="text" name="field_1" autofocus></label></p>
<p><label>Second field<br><input type="text" name="field_2" autofocus></label></p>
</form>
</body>
</html>

iOS野生动物园崩溃（反复出现问题）

5 个答案: