Website flickering/flashing/blinking in Chrome on iPads after using JavaScript to update page with images and text

Question

Our web page flickers on iPads after we add images or text to the page using JavaScript. We have tried various combinations of -webkit-backface-visibility:hidden; -webkit-transform-style:preserve-3d; -webkit-transform:translate3d(0,0,0) against different elements. Since we tile a background image, we can't apply these styles to the body but can apply them to all DIVs, which helps but doesn't remove the issue.

The issue gets triggered here:

$( screenshots ).each( function() {
    var img = $( document.createElement('img') );

    // Set image source
    img.attr( 'src', this );

    // Append new screenshot
    screenshots_box.append( img );
});

// Render description
$( page ).find( '.desc' ).html( data.description.replace(/\n/g, '<br/>') );
$( page ).find( '.desc' ).removeClass( 'loading' );

If we comment out the lines that update the DOM, the flickering vanishes.

To reproduce:

1) On your tablet, using Chrome or Safari, visit http://www.tekiki.com/itunes-store/apps/free-apps/app/a-wheel-of-wopple-free-formerly-boggle-nytimes-fortune?itunes-store-id=481584214.

2) The page will initially load, but after we dynamically update the page with data from iTunes, sections of the page will flicker/flash/blink momentarily.

Answer 1

I don't know exactly if this will solve your problem, but you can certainly do massive optimization to the image loads.

First of all, you can load all nodes to a document fragment and later only append the document fragment to the real DOM.

Second, you can wait for images to load with the load event.

Below, I combined the two methods, so the below code will load images to a document fragment and when the last image is loaded, it appends the document fragment to the dom.

// First, let's create a document fragment for the nodes
var docfrag = document.createDocumentFragment();

// Then count the screenshots
var total = screenshots.length;

// Loop through all image sources
$(screenshots).each(function(){
    // Create the img node with jquery, note that how you can pass
    // all attributes to the node with a second parameter object
    // Plus let's hook the image's load event
    // Append the created img node immediately to the document fragment
    docfrag.appendChild($("<img />", {
        "src" : this
    }).on("load", function(){
        // we decrease the total variable, and if it reached zero( all images loaded )
        // we attach the document fragment to the screenshot box
        // ( I assume screenshots_box is a jquery object, so I need the first element of it )
        if(!--total){
            screenshots_box[0].appendChild(docfrag);
        }
    })[0]);
});

Also please take note, that the slowest thing in the world of webpages is rerendering, eg. if you manipulate the dom, so you need to narrow down the amount you edit the dom to a minimum.

Answer 2

I am not sure if this is a solution or not, but it's a suggestion:

How about you set the display of the img to none and see if the flickering stops:

$( screenshots ).each( function() {
    var img = $( document.createElement('img') );

    img.css('display', 'none')
    // Set image source
    img.attr( 'src', this );

    // Append new screenshot
    screenshots_box.append( img );
});

if it does then display it to block after all images get appended?

$('img').css('display', 'block'); or $('img').show()