Created
November 13, 2011 13:04
-
-
Save madrobby/1362093 to your computer and use it in GitHub Desktop.
Force rendering a DOM element when Webkit is acting up
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
forceRerenderOnWebkit: -> | |
@el.parentNode.style.cssText += ';-webkit-transform:rotateZ(0deg)' | |
@el.parentNode.offsetHeight | |
@el.parentNode.style.cssText += ';-webkit-transform:none' |
@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);
}
@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
Hi guys! Thanks to all for the suggestions... So, anyone know what is the most optimal way to force a reflow? Any jsPerf there? :)
I'll add this one to the pile https://gist.github.com/digitalicarus/c83d9b4c80ab35f7452a
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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