iOS Safari random images on page

If you have lots of static content on page from same domain like images and this domain works over HTTP (not HTTPS) you’ll probably face annoying issue on iOS Safari starting version 5.

The problem is Safari can mix images on page if there are a lot of them. For some reason Safari switches to HTTP pipelining mode when it is not closing connection to server and receives all resources via this connection. HTTP pipelining is the part of HTTP 1.1 standard, but it’s quite buggy and most of browsers vendors keep it turned off. Safari has some heuristic to turn it on in some cases.

Anyway it’s a bug, but it can be fixed in several ways:

  1. Use different domains to serve your static files. Seems like Safari not turning on pipelining in case for small amount of resource from same domain.
    or

  2. Serve your static over https. Seems like http pipelining is off for https.
    or

  3. Inline your static as base64 content. Avoid http requests at all 😉

This link helped a lot to understand what’s going on — http://tech.vg.no/2011/12/14/safari-on-ios-5-randomly-switches-images/