Force DOM redraw/refresh on Chrome/Mac

Not sure exactly what you're trying to achieve but this is a method I have used in the past with success to force the browser to redraw, maybe it will work for you.

// in jquery$('#parentOfElementToBeRedrawn').hide().show(0);// in plain jsdocument.getElementById('parentOfElementToBeRedrawn').style.display = 'none';document.getElementById('parentOfElementToBeRedrawn').style.display = 'block';

If this simple redraw doesn't work you can try this one. It inserts an empty text node into the element which guarantees a redraw.

var forceRedraw = function(element){    if (!element) { return; }    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}

EDIT: In response to Šime Vidas what we are achieving here would be a forced reflow. You can find out more from the master himself http://paulirish.com/2011/dom-html5-css3-performance/

None of the above answers worked for me. I did notice that resizing my window did cause a redraw. So this did it for me:

$(window).trigger('resize');

We recently encountered this and discovered that promoting the affected element to a composite layer with translateZ fixed the issue without needing extra javascript.

.willnotrender {    transform: translateZ(0); }

As these painting issues show up mostly in Webkit/Blink, and this fix mostly targets Webkit/Blink, it's preferable in some cases. Especially since many JavaScript solutions cause a reflow and repaint, not just a repaint.