Skip to content

Ecce Signum

Immanentize the Empathy

  • Home
  • About Me
  • Published Works and Literary Matters
  • Indexes
  • Laboratory

Solving Display Refresh/Redraw/Repaint Issues in Webkit Browsers

2012-09-27 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:

  • http://stackoverflow.com/questions/8840580/force-dom-redraw-refresh-on-chrome-mac
  • http://ajaxian.com/archives/forcing-a-ui-redraw-from-javascript
  • http://stackoverflow.com/questions/3485365/how-can-i-force-webkit-to-redraw-repaint-to-propagate-style-changes
  • http://mir.aculo.us/2009/09/25/force-redraw-dom-technique-for-webkit-based-browsers/
  • https://gist.github.com/1362093
Posted in Programming

Post navigation

Time Keeps On
A Walk Around Pickerel Lake

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Personal website of
John Winkelman

John Winkelman in a diner in San Francisco

Archives

Categories

Posts By Month

September 2012
S M T W T F S
 1
2345678
9101112131415
16171819202122
23242526272829
30  
« May   Dec »

Twitter Feed

Retweet on TwitterJohn Winkelman Retweeted
GennHutchisonGennifer Hutchison@GennHutchison·
20 Jun

Talking to someone about an estranged adult child and their parent, and the person could not understand the child cutting the parent off because "if they die, wouldn't you feel terrible you never made peace?" And it's interesting because... (cont'd)

Reply on Twitter 1539034762790113280Retweet on Twitter 15390347627901132801459Like on Twitter 15390347627901132808052Twitter 1539034762790113280
JohnWinkelmanJohn Winkelman@JohnWinkelman·
19 Jun

Father's Day Sunday brunch with @gallafe . Pop-up brunch in the Chez Olga space on Wealthy Street. Pork sisig, singkamas salad, deviled eggs, and rice. Food served until 1:30 pm so you still have time! I think Jim Harrison would have liked this meal.

Reply on Twitter 1538551512284246016Retweet on Twitter 1538551512284246016Like on Twitter 1538551512284246016Twitter 1538551512284246016
Retweet on TwitterJohn Winkelman Retweeted
LouisPeitzmanLouis Peitzman@LouisPeitzman·
17 Jun

Lauren Boebert spells things wrong in her tweets because it dramatically increases engagement, hope this helps.

Reply on Twitter 1537861383026614274Retweet on Twitter 15378613830266142741083Like on Twitter 15378613830266142748988Twitter 1537861383026614274
Load More...

Links of Note

Reading, Writing
Tor.com
Locus Online
The Believer
File 770
IWSG

Watching, Listening
WYCE Electric Poetry
Writing Excuses Podcast
Our Opinions Are Correct

News, Politics, Economics
Naked Capitalism
Crooked Timber

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

© 2022 Ecce Signum

Proudly powered by WordPress | Theme: x-blog by wpthemespace.com