Mobile Safari on iOS Crashes on Big Pages

Mobile Safari on iOS crashes on big pages

I actually found the problem. It wasn't with JS as I thought, but with the CSS. I added class to make a CSS transition to fade in some elements. For anonymous users these elements had display: none; and probably never ran the opacity transition.

The strange thing is that the transitions was on exactly two elements. So why would this only crash on long threads with 100+ comments?

So the bottom line is: -webkit-transition crashed the page on mobile safari.

Why does simple website crash on mobile (iOS Safari and Chrome, at least)?

I think I fixed it!

The problem, as suspected, was rendering/painting caused by CSS layout. At phone-size, I had been hiding the content of each entry until it was selected; and the method I had been using to hide them, and remove any trace of them from the layout, included position: absolute. I didn't initially use display: none because of typical concerns about wanting to not see content but keep it there, for various readers and reasons. I threw those concerns aside and changed the layout so that the entries were hidden with display: none and shown with display: block -- and that seems to have fixed the crashing.

I think the absolute positioning was stacking a huge amount of content in the corner of the screen, and although it wasn't visible, it was demanding memory.

What clued me in to trying this was an answer to another related question, linked to above by @tea_totaler: https://stackoverflow.com/a/14866503/2284669. It says:

What tends to help me a lot is to keep anything that is not visible at this time under display: none. This might sound primitive but actually does the trick. It's a simple way to tell the renderer of the browser that you don't need this element at this time and therefore releases memory. This allows you to create mile long vertical scrollers with all sorts of 3d effects as long as you hide elements that you are not using at this time.

I think that my other hiding method was not releasing memory, despite its other advantages (which were possibly irrelevant to this particular site anyway). I'm sure it became a problem only because the site was so long.

That's something to consider, though, when you want to hide an element: rendering/memory demands.

How can I determine what crashed Mobile Safari?

What you can do when Safari quits unexpectedly showing your website:

1. Safari debug console

Use Safari's debug console. Switch on in your iPhone: Settings->Safari->Advanced->Debug console=on.

For me it says

• 2 HTML errors on Line 6 (Viewport argument value "device-width" for key "width" not recognized and Viewport argument value "no" for key "user-scalable" not recognized.)
• 2 HTML tips also n Line 6.

Debug console will be shown next time you check your web page using Safari.

2. Web Inspector (from iOS 6.0)

If it is getting more complicated to find out the problem in your webpage use Web Inspector to Debug Mobile Safari. It is a great tutorial for this.

Using IOS Simulator I found that for this particular website all iOS version I have, 5.0, 5.1 and also 6.1, runs the page correctly with crashing the page but on device (iOS 5.0.1) still crashes.

My device runs on iOS 5, so I cannot access Web Inspector, but it is certainly the next step for you to check your site on device and check Web Inspector on your machine.

3. Use iPhone Configuration Utility's Console

You can downlod Apple's iPhone Configuration Utility, then you can access your mobile's Console during Safari test.

Checking your site I see couple of memory warnings which eventually lead to Safari crash.

4a. Use Xcode's debug facility

Using Xcode you can also access the device's Console (Window->Organizer->Devices tab->Console).

Your case reported the following on console:

Apr 30 10:15:18 unknown kernel[0] <Debug>: launchd[2489] Builtin profile: MobileSafari (sandbox)   
Apr 30 10:15:38 unknown MobileSafari[2489] <Warning>: Received memory warning. 
Apr 30 10:15:39 unknown SpringBoard[15] <Warning>: Received memory warning. 
Apr 30 10:15:50 unknown UserEventAgent[12] <Notice>: jetsam: kernel termination snapshot being created 
Apr 30 10:15:50 unknown com.apple.launchd[1] <Notice>: (UIKitApplication:com.apple.mobilephone[0xb2a4]) Exited: Killed: 9
Apr 30 10:15:50 unknown com.apple.launchd[1] <Notice>: (UIKitApplication:com.apple.mobilesafari[0xf755]) Exited: Killed: 9
Apr 30 10:15:50 unknown SpringBoard[15] <Warning>: Application 'Phone' exited abnormally with signal 9: Killed: 9
Apr 30 10:15:50 unknown SpringBoard[15] <Warning>: Application 'Safari' exited abnormally with signal 9: Killed: 9
Apr 30 10:15:52 unknown ReportCrash[2491] <Error>: Saved crashreport to /Library/Logs/CrashReporter/LowMemory-2013-04-30-101552.plist using uid: 0 gid: 0, synthetic_euid: 0 egid: 0

4b. Use Xcode's debug facility, Instruments

Another sophisticated way to check what's happening is to use Instruments.

Checking again your site I see many-many low memory warning reported by Safari before it quits. Sadly it doesn't directy help you discovering the web site problem but maybe helps to find Safari open bug reports.

---

Related Topics