Website repeatedly reloads, then crashes on iPhone 4: iOS 8.0.2 & iOS 8.1.2

Question

An example of what happens when loading the website can be seen here for theverge.com. No such problems occur on the latest browser and OS versions for:

• Windows 8.1 - Chrome, Firefox, Opera, IE.
• OSX Yosemite - Chrome, Safari.
• Android 4.4 - Chrome, Firefox, Opera, Safari.
• iOS 7.1.2(iPad) - Safari.
• iOS 8.3 (iPhone 5) - Safari.

However, on two separate iPhone 4S devices (iOS 8.0.2 & iOS 8.1.2), Safari will continue to refresh the page, each time reading "problem occurred with this webpage so it was reloaded" until finally crashing and reading "A problem repeatedly occurred on [website URL]". I have made sure that my JavaScript/jQuery are syntactically correct (as well as loading the webpage with JavaScript turned off in safari settings - same problem), cleared cache, restarted the iPhones and can not imagine what else could be causing the problem. The web page is only small with a total file size of around 300kb and only some fairly simple DOM manipulation.

From what I can tell of my own testing and what I have read, the problem is isolated to iOS 8.0.2 and 8.1.2 but obviously, my website is in the minority of sites that crash on the OS and I would like to know what it is exactly that causes the problem.

Thank you.

EDIT: Updated one of the iPhones to iOS 8.3 - problem still persists. Absolutely stumped at this point and any suggestions would be greatly appreciated.

Answer 1

Short Answer:

Check all of your CSS for animation keyframes and remove any font-size animations within those blocks.

Long Answer

The lack of any developer-centric conversations regarding "A problem repeatedly occurred on..." issues is definitely disappointing. After an hour of Googling tonight I stumbled on your post here and had to do a double-take when I saw the timestamp. // High five fellow trouble-shooter.

As luck would have it, I was able to track down a potential source for this iOS/Webkit bug within my CSS. Specifically it seems to be related to how Safari deals with font-size animations inside of CSS keyframes. I had something like this in my SASS:

@-webkit-keyframes labels-bottom {
    0%   { opacity: 1; color:#888888; top: 0.1em; font-size: 1.5em; }
    20%  { font-size: 1.5em; opacity: 0; }
    30%  { top: 0.1em; }
    50%  { opacity: 0; font-size: 0.85em; }
    100% { top: 4em; opacity: 1; }
}

When I removed that whole block, it began working.

When I went further and removed CSS properties one-by-one, the crash seemed to be isolated to the font-size animation. It, however, does not appear to be associated with @font-face web fonts or if you specify size using different units (em/px/pt). All conditions tested caused the same crash. The only thing that fixed it was removing any font-size changes within my keyframe blocks, a la:

@-webkit-keyframes labels-bottom {
    0%   { opacity: 1; color:#888888; top: 0.1em; }
    20%  { opacity: 0; }
    30%  { top: 0.1em; }
    50%  { opacity: 0; }
    100% { top: 4em; opacity: 1; }
}

It's possible (and perhaps likely) that other animated properties can trigger the crash, but this fix definitely worked for me and I hope it does for you as well.

PS: I tested this on both iOS 8.1.2 and 8.3 (iPads).

Answer 2

In addition to the other answers which all point to CSS being the cause, I can report that complex JavaScript manipulation of JSON data objects can also cause this error. Specifically, loading a large precomputed search index (a ~1MB or larger JSON file) into a page for use with lunr.js will exhibit the above failure.

I thought it might be because of server-side compression (the 1MB JSON data was transferred compressed in about 200kB) but the error persisted after disabling compression, so I can only assume the problem happens internally to Safari while parsing the JSON data.

Interestingly, I can load the raw search data from a JSON file (size comparable to the index data that causes the crash) and build the Lunr search index in the browser - just can't load the precomputed search index from a JSON file.