JavaScript Snippet Force a DOM Element Redraw/Repaint
Share
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;
}