JavaScript
Article

JavaScript Snippet Force a DOM Element Redraw/Repaint

By Sam Deering

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;
}

Free Guide:

7 Habits of Successful CTOs

"What makes a great CTO?" Engineering skills? Business savvy? An innate tendency to channel a mythical creature (ahem, unicorn)? All of the above? Discover the top traits of the most successful CTOs in this free guide.

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in JavaScript, once a week, for free.