André Roaldseth
Written by André Roaldseth
Published 2012-01-18

Safari on iOS 5 Randomly Switches Images, Part 2

This post is a follow-up to Safari on iOS 5 randomly switches images. In our case almost all of the images on the front page has unique height * width combinations. Since our CMS sets the image size with height/width attributes in the element and rescales the image file to fit those dimensions, we can compare that the height/width and naturalHeight/naturalWidth matches up.

Entry image

The basic JS for detecting it is like this. It requires that the img elements found has a defined sized from either with CSS or HTML.

Example of the masking we add over images when they are detected as misplaced.

This can be used to either add a cachebreaker parameter to the URL and change the src of the image element, or do a POST/PUT on the image URL to break caching.

We now use the script to log when the problem occurs and mask it so our readers know we are aware of the problem. The logging is used in an attempt to find the common denominators, and to see if there is some pattern that can replicate the problem. We have a bug report with Apple, but they naturally want a specific routine that reproduces the problem.

Bruteforcing the bug

We’ve also created a version of this script to assist in replicating the problem. This script reloads the front page every time there is a page view without misplaced images. This enables us to start it up just check in the machine to see if it have found any problems.

We use this script in addition to Apple iOS Simulator and the Network Link Conditioner to replicate the conditions of a laggy EDGE connection. In our experience this problem usually occurs with bad internet connections, but there seems to be no guarantees either way.

Written by André Roaldseth
Published 2012-01-18