我正在开发一个网站，在测试我的iPhone X时最近遇到了一个问题 - 网站无法加载。
Safari尝试加载它，然后报告错误“此网页已重新加载，因为出现问题”，经过几次尝试后放弃并报告“重复出现问题”。我的iPhone上的Chrome也无法加载该站点。
目前我无法公开分享网站，但是在chrome桌面控制台中没有报告任何错误。事实上，该网站在我的桌面电脑、笔记本电脑、旧版iPhone 6和5s、朋友的三星安卓和其他15个随机计算机和手机上都可以完美运行。 在xCode模拟器中也可以正常加载。但它在我的iPhone X上无法正常工作。
我在SO和互联网上的研究让我相信，这种错误通常是由于内存使用过多，但桌面Chrome仅报告内存使用峰值为20mb。而且，该网站在我的不太好的iPhone 5s上也可以正常加载。
我已清除了iPhone X上的Safari和Chrome缓存，切换了cookie阻止的开关，重置了网络设置，并重新启动了手机。
我担心如果我的iPhone X无法加载该网站，那么毫无疑问其他用户也会遇到问题，即使我测试过的20个杂项设备都可以正常工作。
有人知道这里发生了什么吗？
/*
// 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>当我尝试在Safari中使用three.js场景的渲染器上的 powerPreference 属性以“高性能”模式访问webgl上下文时，我在Safari中看到了相同的错误消息。
移除高性能模式后，我的网页得以加载。
background-position动画后，它不再崩溃。为什么？我猜问苹果吧...我在其他设备上尝试时没有发生这种情况。¯_(ツ)_/¯ - rwcorbettautofocus属性。从元素中删除额外的autofocus可以为我解决这个问题。.focus() 调用，我就无法重现这个问题。在同一页上设置超过一个控件的 autofocus 属性并不会触发崩溃。如果您有更多信息，我很乐意了解。 - Ro Achterberg我遇到了类似的问题：
我的网站（只有在特定页面上）在iOS Safari上显示错误消息“在我的-页面-url上反复发生问题”，但控制台中没有任何错误。 在所有桌面浏览器上，此页面均可正常工作，在所有Android手机上也是如此，但在iOS Safari上，页面显示错误...
经过多小时的调查，我发现问题出在CSS属性上。
height: intrinsic;
这真的很奇怪，因为这个属性只在桌面版Safari上有效，在其他浏览器上被忽略了。但是移动版Safari却崩溃了...
所以我改变了这个CSS属性，一切都解决了 :)
希望这能帮助某人节省几个小时的调试时间 :)
Safari因为Firestore占用了所有内存而崩溃，问题在这里：https://github.com/firebase/firebase-js-sdk/issues/6118，通过以下方式初始化Firestore已经解决了该问题：
export const db = initializeFirestore(app, {
experimentalForceLongPolling: true,
})
我遇到了一个类似的问题，它涉及呈现一系列 SVG 的页面。将 SVG 替换为 PNG 解决了该问题。
:root {
--shadow--lg: 25px 50px 62px -3px rgba(9, 9, 12, 0.34),
17px 34px 43px -2px rgba(9, 9, 12, 0.34),
11px 22px 28px -2px rgba(9, 9, 12, 0.34),
7px 14px 18px -1px rgba(9, 9, 12, 0.34),
4px 9px 11px -1px rgba(9, 9, 12, 0.34),
3px 4px 7px -1px rgba(9, 9, 12, 0.34), 2px 3px 4px rgba(9, 9, 12, 0.34),
0px 1px 1px rgba(9, 9, 12, 0.34);
}
transform: scale(0.5, -0.05); filter: brightness(0.2) blur(50px);声明。有趣的是，页面上还有很多更重的东西。 - Theo.Tbackground-position的关键帧动画来解决它。 - rwcorbett