Mobile Safari is known to quite often crash / terminate silently when loading certain Webpages. Since iOS 4, this happens frequently on older devices like the iPhone 3GS, but sometimes it also happens on newer Phones and the iPad.

The crashes are caused by mobile safari using up all available memory on the device, and as iOS 4 needs more memory for itself, it worsens the situation.

It is quite well known, that mobile safari does not like images that much. So the obvious solution is quite simple: reduce the amount of images on your page. This should be a standard procedure during the development of a useable mobile design anyway, but as Thomas Fuchs pointed out, advanced tricks like replacing gradient images with custom canvas elements can be beneficial too.

This solution is not possible for things like galleries or news sites with large images. In these cases ajax and dynamic loading of image content seems to be the best solution. In essence you load images as they start to move into the viewport and remove them as soon as they leave it – i.e. the user scrolls away. The simple way would be to just remove the image from the dom like in jquery:

$('.my-image').remove()

In our tests this however did not solve the problem, as constant loading and removing of images sooner or later overloaded the little mobile browser and lead to a crash. Still after a little bit of work on our side, we found a solution that seems to prevent memory growth quite effectively. The general idea is to reuse javascript Image objects to load inline image data – some sample code below:

This leads to a bit more work when implementing the frontend, but can quite effectively reduce memory usage and increase stability on mobile safari. We did not test this solutio on devices other than iPhone and iPad, but as mobile safari is webkit based, this solution should also improve pages on android devices. Though these are frequently equipped with much more memory anyway.

And last but not least: try to restrict your use of google web fonts or typekit fonts to a minimum, as loading more than one font weight / loading more than one font seems to crash mobile safari – more details on these problems can be found  on google code as well as the typekit blog.