iOS safari 崩溃（问题反复出现）答案

【问题标题】：iOS safari crashing (a problem repeatedly occured)iOS safari 崩溃（问题反复出现）
【发布时间】：2019-03-06 19:44:38
【问题描述】：

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

Safari 尝试加载它，然后报告错误“此网页已重新加载，因为出现问题”，经过几次尝试后它放弃并报告“反复出现问题”。我 iPhone 上的 Chrome 也无法加载该网站。

此时我无法公开分享网站，但在 chrome 桌面控制台中没有报错。事实上，该网站在我的台式机、笔记本电脑、旧 iPhone 6 和 5s、我的朋友三星 android 以及我测试过的其他 15 台随机电脑和手机上运行得非常好。它在 xCode 模拟器中也可以很好地加载。但它不适用于我的 iPhone X。

我对 SO 和整个互联网的研究让我相信这个错误通常是由于内存使用过多造成的，但桌面版 Chrome 报告的内存使用峰值仅为 20mb。此外，该网站在我的劣质 iPhone 5s 上也能正常加载。

我已清除 iPhone X 上的 safari 和 chrome 缓存，打开/关闭阻止 cookie，重置网络设置，并重新启动手机。

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

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

【问题讨论】：

你在这方面有什么进展吗？我很想听到...我遇到了类似的问题，不同之处在于网站加载但任何交互都会导致网站立即崩溃。网站在性能较差的旧设备等上运行良好。
是的，这听起来和我一样。我刚刚发布了我的解决方案。
终于拿到了一个设备——在我的例子中，这是因为一个 transform: scale(0.5, -0.05); filter: brightness(0.2) blur(50px); 声明。很有趣，因为页面上的内容要多得多。
我可以支持这样的想法，即这是由于 CSS 渲染造成的 - 我遇到了这个问题，但能够通过删除 background-position 上的关键帧动画来解决它，该元素已改变不透明度和规模。
对我来说，这是一个异步 api 调用陷入无限循环，这很可能是内存问题。我将“检查任何 API 调用”添加到清单中。这个错误很奇怪，但它完全为我解决了。

标签： ios iphone memory safari crash

【解决方案1】：

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

是否发生崩溃取决于何时请求焦点。在“窗口加载”事件中，事情继续运行。当在“文档就绪”处理程序中或在文档末尾请求时，事情就会变糟。

在多个元素上设置autofocus 没有多大意义，但浏览器不应该崩溃。 JavaScript 后备可用于为browsers that lack support 为autofocus 属性提供一致的用户体验。明显的解决方法是删除所有冲突的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>

【讨论】：

遇到了这个问题，原因是通过 JavaScript 将焦点从具有 autofocus 属性的输入上移开。我们的解决方法是删除元素上的属性并仅通过脚本处理它。

【解决方案2】：

我通过假设这确实是一个内存问题并将 display:none 设置为在视口中不可见的元素（通过使用窗口滚动事件）来“解决”这个问题。

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

这解决了我的 iPhone X 在 Safari 中崩溃的问题。但是它并没有解释为什么当网络应用程序消耗低于 20mb 的内存并且它在任何其他功能较弱的设备上运行良好时，为什么会首先在功能强大的设备上发生这种情况我能找到。

【讨论】：

听起来是一个相当激进的解决方案。通过删除转换和过滤器，我得到了改进，但无法将其缩小到一个问题。主要问题是我无法直接使用 iPhone X，因此测试非常繁琐。
正如我在上面的评论中所说，我认为这是正确的答案 - 删除或限制过多的动画或 CSS 渲染似乎可以解决崩溃问题。我的网页也非常小（~21MB），删除background-position 的动画后，它不再崩溃。为什么？问苹果我猜......这在我尝试过的任何其他设备上都没有发生。 ¯_(ツ)_/¯

【解决方案3】：

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

删除高性能模式允许我的网页加载。

【讨论】：

【解决方案4】：

我遇到了类似的问题：

在我的网站上（仅在特定页面上）iOS Safari 显示错误消息“my-page-url 上反复出现问题”，而控制台中没有任何错误。在所有桌面浏览器上，此页面都可以正常工作，在所有 Android 手机上也可以，但在 iOS Safari 页面上显示错误...

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

height: intrinsic;

这真的很奇怪，因为这个属性只能在桌面 Safari 上正常工作，而在其他浏览器上它只是被忽略了。但是移动版 Safari 死了……

所以我更改了这个 CSS 属性，一切都修复了 :)

希望这将帮助某人节省几个小时的调试时间:)

【讨论】：

我发现自己正处于这种情况。您也将 CSS 属性更改为什么？
任何公共属性，例如继承或 100%

【解决方案5】：

花了我相当多的时间来调试一个类似的问题。

对我来说，这是因为我使用的是 Vuetify，并且有 2 个文本字段都设置了 autofocus 属性。从元素中删除额外的autofocus 为我修复了它。

【讨论】：

为了对此进行一些扩展，如果没有 JavaScript .focus() 调用，我将无法重现此问题。仅在同一页面上的多个控件上设置autofocus 属性并不会触发我的崩溃。如果您有更多信息，我很想知道。