在Chrome/Mac上强制DOM重绘/刷新

Question

每隔一段时间,Chrome都会错误地呈现完全有效的HTML/CSS或根本不呈现.通过DOM检查器深入挖掘通常足以让它实现其方式的错误并正确地重绘,因此可以证明标记是好的.这种情况在我正在进行的项目中经常(并且可预测地)发生,因为我已经将代码放在适当位置以在某些情况下强制重绘.

这适用于大多数浏览器/操作系统组合:

    el.style.cssText += ';-webkit-transform:rotateZ(0deg)'
    el.offsetHeight
    el.style.cssText += ';-webkit-transform:none'

如在,调整一些未使用的CSS属性,然后询问一些强制重绘的信息,然后取消对该属性的破坏.不幸的是,Chrome for Mac背后的聪明团队似乎找到了一种方法来获得offsetHeight而无需重绘.从而杀死了一个有用的黑客.

到目前为止,我想出的最好的方法是在Chrome/Mac上获得同样的效果:

    $(el).css("border", "solid 1px transparent");
    setTimeout(function()
    {
        $(el).css("border", "solid 0px transparent");
    }, 1000);

实际上,强制元素跳跃一点,然后冷却一秒钟然后再跳回来.更糟糕的是,如果你将超时时间降低到500毫秒以下(不太明显),它通常不会产生预期的效果,因为浏览器在返回其原始状态之前不会重新绘制.

有人愿意提供适用于Chrome/Mac的重绘/刷新黑客(最好是基于上面的第一个例子)的更好版本吗？

Answer 1

不确定你想要实现什么,但这是我过去使用的一种方法,成功地强制浏览器重绘,也许它会对你有用.

// in jquery
$('#parentOfElementToBeRedrawn').hide().show(0);

// in plain js
document.getElementById('parentOfElementToBeRedrawn').style.display = 'none';
document.getElementById('parentOfElementToBeRedrawn').style.display = 'block';

如果这个简单的重绘不起作用,你可以尝试这个.它将一个空文本节点插入到元素中,以保证重绘.

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
}

编辑:为响应ŠimeVidas,我们在这里取得的成果将是强制回流.你可以从大师那里了解更多信息http://paulirish.com/2011/dom-html5-css3-performance/

Answer 2

上述答案都不适合我.我注意到调整窗口大小确实会导致重绘.所以这对我来说:

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

Answer 3

此解决方案没有超时!真正的力量重绘!适用于Android和iOS.

var forceRedraw = function(element){
  var disp = element.style.display;
  element.style.display = 'none';
  var trick = element.offsetHeight;
  element.style.display = disp;
};

Answer 4

我们最近遇到过这种情况并发现使用translateZ将受影响的元素提升为复合图层可以解决问题而无需额外的javascript.

.willnotrender { 
   transform: translateZ(0); 
}

由于这些绘画问题主要出现在Webkit/Blink中,并且此修复主要针对Webkit/Blink,因此在某些情况下更为可取.特别是因为许多JavaScript的解决方案,导致回流和重绘,而不仅仅是一个重绘.

Answer 5

这适合我.荣誉来到这里.

jQuery.fn.redraw = function() {
    return this.hide(0, function() {
        $(this).show();
    });
};

$(el).redraw();

Answer 6

隐藏元素然后在setTimeout为0的情况下再次显示它将强制重绘.

$('#page').hide();
setTimeout(function() {
    $('#page').show();
}, 0);

Answer 7

这似乎对我有用。另外，它真的根本不显示。

$(el).css("opacity", .99);
setTimeout(function(){
   $(el).css("opacity", 1);
},20);

Answer 8

2020：更轻更强

以前的解决方案对我来说不再适用。

我猜想浏览器通过检测越来越多的“无用”更改来优化绘图过程。

该解决方案使浏览器绘制一个克隆来替换原始元素。它有效并且可能更可持续：

const element = document.querySelector('selector');
if (element ) {
  const clone = element.cloneNode(true);
  element.replaceWith(clone);
}

在 Chrome 80 / Edge 80 / Firefox 75 上测试