Force-redraw DOM technique for WebKit-based browsers
September 25th, 2009 by Thomas Fuchs, 4 comments »Something I’ve tried when I had an issue with Safari 4 not properly layouting/rendering an element after setting a new value for its innerHTML:
element.style.webkitTransform = 'scale(1)';
This did the trick and should work with Safari, Chrome and other browsers that are based on WebKit.
If you need a more general solution for elements that don’t seem to render properly, try my text-node based trick.
Seems that browsers are a little bit too optimized, but as long as you can give them a nudge…
Tweet This Post
Digg This Post
Share on Facebook









Did you file a bug on the underlying issue about changing innerHTML?
@smfr I couldn’t isolate it into a reduced test case, so I didn’t file a bug for this, but you’re right, I should!
I’ve solved it on swffit [http://code.google.com/p/swffit/] giving the focus to the HTML (I’m not sure why I’ve used this specific technique..):
document.getElementsByTagName(‘html’)[0].focus();
On a previous project I’ve “changed” the className and it also worked (just can’t remember if it was for WebKit browsers):
document.getElementById(‘my_element’).className += ”;
Changing properties like “display”, “border”, “padding” or calling “window.scrollBy(1,0)” also forces the browser to re-render.
Thanks for the tip…
I was having a problem in Mobile Safari (iPhone/iPod) where the text in a text box wasn’t being repainted/rendered properly when typing.
I placed this ‘webkitTranform’ style onto the element during the keypress event and everything repainted nicely.