JavaScript Snippet Force a DOM Element Redraw/Repaint

JavaScript code snippet to force a DOM element redraw/repaint. A bit hacky but useful as a last resort.

var element = document.getElementById('id');
var n = document.createTextNode(' ');
var disp = element.style.display;  // don't worry about previous display style

element.appendChild(n);
element.style.display = 'none';

setTimeout(function(){
    element.style.display = disp;
    n.parentNode.removeChild(n);
},20); // you can play with this timeout to make it as short as possible

Using Transit.js

If your using a transition plugin like transit.js this also works:

$('#element')
    .transition({ x: '-500px', easing: 'snap', duration:'0' })
    .transition({ x: '0', easing: 'snap', duration:'0' })
    .css('z-index','10');

CSS:

#element {
     position: absolute;
     right: '-500px';
     z-index: -1;
}