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.
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.
jQuery().ready(function($) {
$(window).bind('load', function() {
$('.article-content img').each(function(i, el) {
if (el.naturalHeight !== el.height || el.naturalWidth !== el.width) {
// Wrong image is here
}
});
});
});
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.
jQuery(function($) {
$(window).load(function() {
var images = $('.article-content img');
var faultyImages = new Array();
// Prepare a error message if any of the photos was wrong
var ImageError = function() {
return $('Sorry, wrong image.')
.css({ display: 'block', position: 'absolute', top: 0, right: 0, bottom: 0, left: 0, background: 'rgba(255, 150, 150, 0.8)', textAlign: 'center', padding: '10px 5px 0', font: 'bold 18px serif', color: '#fff' });
}
images.each(function(i, el) {
// Make sure all images is loaded correctly
if (el.naturalHeight 1) || (Math.abs(el.naturalWidth - el.width) > 1)) {
faultyImages.push(el);
// Find the container(div with position: relative)
var container = $(el).closest('.df-img-container');
container.append(new ImageError());
}
});
// Check if we found any misplaced images
if (faultyImages.length > 0) {
// Display an alert() message
alert('Bug found');
// Scroll to the first misplaced image
$(window).scrollTop($(faultyImages[0]).offset().top);
} else {
// No misplaced images, reload and try again
window.setTimeout(function() { window.location.reload(); }, 1000);
}
});
});
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.