Skip to content

Instantly share code, notes, and snippets.

@madrobby
Created November 13, 2011 13:04
Show Gist options
  • Save madrobby/1362093 to your computer and use it in GitHub Desktop.
Save madrobby/1362093 to your computer and use it in GitHub Desktop.
Force rendering a DOM element when Webkit is acting up
forceRerenderOnWebkit: ->
@el.parentNode.style.cssText += ';-webkit-transform:rotateZ(0deg)'
@el.parentNode.offsetHeight
@el.parentNode.style.cssText += ';-webkit-transform:none'
@bundyo
Copy link

bundyo commented Nov 14, 2011

Should be enough to get the computed style of the element to force a repaint.

@gr2m
Copy link

gr2m commented Nov 15, 2011

I don't have a better solution, but your suggestion just fixed a bug I had in Opera. Thanks :-)

@gr2m
Copy link

gr2m commented Nov 15, 2011

I also found this plugin:
http://plugins.jquery.com/files/jquery.forceredraw-1.0.3.js_.txt

It confirms @KrofDrakula's suggestion for most cases but also has a "brutal" fallback where it changes CSS as you do in your suggestion, just using a 1ms timeout before it changes it back

@KrofDrakula
Copy link

@gr2m: It would seem the "brutal" version here changing the padding seems a bit overkill; I use the following code for a rock solid repaint:

function forceRedraw(el) {
  var t = el.ownerDocument.createTextNode(' ');
  el.appendChild(t);
  setTimeout(function() { el.removeChild(t); }, 0);
}

@helgri
Copy link

helgri commented Nov 15, 2011

@gr2m damn, i just suggested a class named "repaint", not "redraw" ;)

but i still favor a solution which doesn't need to touch the dom at all

@nuragic
Copy link

nuragic commented Jun 10, 2014

Hi guys! Thanks to all for the suggestions... So, anyone know what is the most optimal way to force a reflow? Any jsPerf there? :)

@digitalicarus
Copy link

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment