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?
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.
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.
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 :)
