VGTech is a blog where the developers and devops of Norways most visited website share code and tricks of the trade… Read more



Are you brilliant? We're hiring. Read more

Safari on iOS 5 Randomly Switches Images, Part 2

DevOps

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.

Show code
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.

Show code
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.

Developer at VG. @androa


4 comments

  • ?

    Får beskjed om at det er feil bilde når det er riktig ...


    • ay

      Bug on our side. It's been fixed. Sorry.

  • ay

    Because the audience of http://www.vg.no is Norwegian, while our technical blog might be interesting to a to a more international group of people.

    One of the things we want to write about is the Varnish Cache project that is used by many large websites out there and was originaly started by us.


  • Safari on iOS 5 Randomly Switches Images, Part 3 – VG Tech

    [...] We are still digging deeper into the imagebug problem we’ve mentioned in part 1 and part 2. [...]


Leave your comment