We recently encountered an issue on a jQuery Mobile site where Mobile Safari on an Ipod touch devices mobile safari would crash when accessing certain pages.
It was impossible to recreate the crashes on a desktop machine or Iphone device. Hmm what to do?
The first step is to try and get some info for what caused the crash. You can retrieve the reason for a crash on an i device by syncing it with Itunes.
On my windows machine crash reports are stored at the following location (yours will obviously differ depending on user and device name):
C:\Users\alex\AppData\Roaming\Apple Computer\Logs\CrashReporter\MobileDevice\alexs iPhone4
Crash reports for Mobile Safari have a file name similar to the following:
If you open up this file in notepad you may (or may just get a cryptic message) about what caused the crash.
Within this file was a report of low memory condition. We initially reviewed the pages that were crashing the ipod touch devices and found they had many DOM elements on the page (the client had asked us to replicate an existing iphone application exactly – let’s ignore whether this is a good idea for the time being..). The developer had also attached a click event to each individual element (far better to let the event bubble up the containing element). In addition to the large number of elements jQuery mobile would add its own styling/elements further compounding the problem.
The solution was to modify the event handler to capture bubbled up events and reduce the number of DOM elements. The pages then would not crash on the ipod touch device. It appears that i devices have around 10mb of memory that is shared across tabs. Due to jQuery mobile keeping pages around in the DOM you could run into this sort of issue fairly quickly so its vital to be sensible with your event binding and HTML coding. It’s also worth noting that we couldn’t get iPhone devices to crash so they probably have more memory than an iPod touch (Apple documentation is woefully inadequate regarding this..)