发表新帖
发表新帖

iOS safari crashing (a problem repeatedly occured)

前端 未结
关注
5 1913
春和景丽
春和景丽 2021-02-14 21:47

I\'m developing a website and have recently run into a problem when testing on my iPhone X - the site wont load.

Safari tries to load it, then reports the error \'this

相关标签:
5条回答
  • 抹茶落季
    2021-02-14 21:56

    Spent my fair share of debugging a similar issue.

    For me it was due to the fact that I was using Vuetify, and had 2 text-fields that both had autofocus property set. Removing that extra autofocus from an element fixed it for me.

    0 讨论(0)
  • 天命终不由人
    2021-02-14 21:56

    I ran into this issue today and wanted to see the MRE that would cause this to happen. It does seem to be the case that both Safari and Chrome on iOS 14 crash when the autofocus attribute is set on at least two <input> controls, and focus is then requested on either control using JavaScript. I was able to confirm that the crash doesn't occur on iOS <= 13. Chrome 87 and Safari 13.1 on macOS are also unaffected.

    Whether the crash occurs depends on when focus is requested. In the 'window load' event, things keep running. When requested in the 'document ready' handler, or at the end of the document, things go bad.

    Setting the autofocus on more than one element doesn't make much sense, but the browser shouldn't crash. The JavaScript fallback may be used to provide a consistent UX for browsers that lack support for the autofocus attribute. The obvious fix for this is to remove all conflicting autofocus attributes.

    /*
// 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>

    0 讨论(0)
  • 走了就别回头了
    2021-02-14 21:56

    I saw this same error message in Safari when I tried to access a webgl context in "high-performance" mode (using the powerPreference attribute on the renderer in a three.js scene).

    Removing the high-performance mode allowed my webpage to load.

    0 讨论(0)
  • 遥遥无期
    2021-02-14 22:11

    I faced a similar issue:

    on my website (only on a specific page) iOS safari shows error message "a problem repeatedly occurred on my-page-url" without any errors in the console. On all desktop browsers this page works fine, on all Android mobile phones also, but on iOS Safari page shows error...

    After many hours of investigation, I have found that the problem was with the CSS property

    height: intrinsic;

    it was really strange, because this property works fine only on desktop Safari, on other browsers it was just ignored. But mobile Safari dies...

    So I changed this CSS property and everything was fixed :)

    Hope this will help someone to save few hours of debugging :)

    0 讨论(0)
  • 礼貌的吻别
    2021-02-14 22:14

    I have “solved” this by assuming this is indeed a memory problem and setting display:none to elements not visible in the viewport (by using a window on-scroll event).

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

    This fixed the crashing in safari on my iPhone X. However it does not explain why this was occurring in the first place on a powerful device when the web app consumes under 20mb of memory and it ran fine on any other less powerful device I could find.

    0 讨论(0)
 看不清?
提交回复
热议问题