Hi, I'm Thomas Fuchs. I'm the author of the script.aculo.us user interface JavaScript library, a member of the Prototype core team and a Ruby on Rails core alumnus. You're using my work every day, even if you're not aware of it (sounds creepy, I know!). Need JS foo? Hire me.

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…

Do you run a web site or web application? Do your users a favor, and grab our ebook on JavaScript performance. Profit from our knowledge gathered in over 15 years of working with the Web and JavaScript and make your sites ultra-fast and your users ultra-happy.

1 smfr said at 4:23 pm on September 26th, 2009:
Did you file a bug on the underlying issue about changing innerHTML?
2 Thomas Fuchs said at 4:28 pm on September 26th, 2009:
@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!
3 Miller Medeiros said at 7:49 pm on November 10th, 2009:
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.
4 thomp132 said at 7:32 pm on November 16th, 2009:
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.