Menu
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 web page was reloaded because a problem occured', and after a couple of tries it gives up and reports 'a problem repeatedly occured'. Chrome on my iPhone also doesn't load the site.
At this time I can't share the website publicly, but there are no errors reported in the chrome desktop console. In fact, the website runs perfectly fine on my desktop, my laptop, my old iPhone 6 and 5s, my friends Samsung android, and 15 other random computers and phones I've tested it on. It also loads fine in xCode simulator. But it doesn't work on my iPhone X.
My research across SO and the internet in general has led me to believe this error is usually due to excessive memory usage, but desktop Chrome reports the memory usage peaks at 20mb only. Also the site loads just fine on my inferior iPhone 5s.
I have cleared the safari and chrome caches on my iPhone X, toggled block cookies on/off, reset network settings, and restarted the phone.
My worry is that if my iPhone X doesn't load the site, no doubt other users will have problems, even if the 20 miscellaneous devices I have also tested work just fine.
Does anyone have any idea what is going on here?
833
Malfunctioning extensions could prevent Safari from accessing the Internet: Browse for Settings -> Safari -> Extensions and disable the available Extensions. Get back to Safari and the 'problem repeatedly occurred' error should be replaced by the actual web page that you were trying to load.
When the browser does not have enough RAM for processing, it will auto-kill the browser tabs for making RAM available for new pages, thus resulting in auto-reload on visiting the inactive tabs. Disabling the unnecessary processes can stop Safari tabs from auto-reload.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
