Forcing browsers to rerender elements
Generally speaking browsers rerender elements as required – in response to DOM changes effected via JavaScript, for instance. There are times, though, when the browser (Internet Explorer, I'm looking at you!) needs a gentle nudge.
Forcing a UI redraw from JavaScript highlights the solution employed by Thomas Fuchs, creator of the popular JavaScript library script.aculo.us:
Element.addMethods({ redraw: function (element) { element = $(element); var n = document.createTextNode(' '); element.appendChild(n); (function () { n.parentNode.removeChild(n); }).defer(); return element; } });
The post's first comment includes an alternative approach:
element.className = element.className;
I gather that there are situations in which this simple solution fails — it's no silver bullet — but it fixed a problem I encountered in IE8 earlier this evening so I'm pleased to have discovered it!