Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 596
Crashalot Avatar asked Jul 08 '13 05:07

Crashalot


People also ask

Why does my Google Chrome keep flickering?

If you experience screen flickers when using Google Chrome, your primary suspect should be your display drivers. This issue often comes up when your drivers are incompatible with your system. Another cause can be your Windows background and color settings.

Why does my website flicker?

Web pages loads slowly and gives a white flicker because many a times the browser is tied up with processing the components in the page as : images, style sheets, scripts, Flash etc. Before rendering any page, browsers will always wait until everything (beyond images) has finished downloading.

How do I stop angular flickering?

The ngCloak directive is used to prevent the AngularJS html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.


2 Answers

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.

like image 66
Lajos Mészáros Avatar answered Oct 19 '22 23:10

Lajos Mészáros


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()
like image 23
Sammy Avatar answered Oct 19 '22 23:10

Sammy