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.
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.
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.
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.
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.
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()
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With