Day: September 27, 2012

Solving Display Refresh/Redraw/Repaint Issues in Webkit Browsers

John Winkelman

So debugging on a phone is nowhere near as easy as debugging on a web application, if only because you can’t use the Chrome developer tools or Firebug effectively on a three-inch screen. Fortunately (for Android developers) there is a tool called the Dalvik Debug Monitor, which comes packaged with the Android SDK. It listens to any logs coming from the phone, assuming the phone on which you are testing an app is plugged into your computer via USB cable. Works pretty well, once you get the quirks sorted out.

Anyway: on the recently completed project I came across a bug where, when updating the text content of an element on the screen, the interface refused to update until another event fired in a nearby (DOM-wise) element. Debugging was a pain, because all of the traces I had running told me that yes, all of my Javascript functions had fired, and yes, the content of the element was correct. But the screen itself still showed the old content.

Turns out, this is a Known Issue for Webkit browsers (Chrome, Safari). Sometimes, when updating an inline element or style, the browser does not redraw/repaint the screen until a block-level change happens in the DOM. This bug  most often occurs when there is a lot going on in the page, and the browser seems to assume that, if the change is not happening at the block (which is to say, layout), level, then it is less important.

Fortunately, solving the issue is MUCH easier than diagnosing it. A simple, quick update to the offending element (or its parent) will force the browser to repaint the screen. Here are a few different ways to accomplish this:

/*	Silently append and remove a text node	
	This is the fix that worked for me in the Phonegap/Android application
	the setTimeout allows a 'tick' to happen in the browser refresh,
	giving the UI time to update
*/
var n = document.createTextNode(' ');
$('#myElement').append(n);
setTimeout(function(){n.parentNode.removeChild(n)}, 0);


/*	Hide and reshow the element	*/
document.getElementById('myElement').style.display='none';
document.getElementById('myElement').offsetHeight; // no need to store this anywhere, the reference is enough
document.getElementById('myElement').style.display='block';


/*	The same thing using jQuery	*/
$('#myElement').hide();
$('#myElement').get(0).offsetHeight; // no need to store this anywhere, the reference is enough
$('#myElement').show();


/*	Set the scale of the element to 1. 
	This doesn't actually change anything visually, 
	because by default everything in the browser 
	is set to scale 1	*/

document.getElementById('myElement').style.webkitTransform = 'scale(1)';

The first one is the one I used. I was using jQuery so this simplified things just a bit. All of the other fixes are valid, but the one I used was the only one that actually worked for me in the PhoneGap application.

For further reference, here are the resources I used while tracking down and solving the bug: