每隔一段时间,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);

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

有人愿意提供一个更好的版本的重绘/刷新hack(最好基于上面的第一个例子),工作在Chrome/Mac?


当前回答

大多数应答需要使用异步超时,这会导致恼人的闪烁。

但我想到了这个,它很顺利,因为它是同步的:

var p = el.parentNode,
    s = el.nextSibling;
p.removeChild(el);
p.insertBefore(el, s);

其他回答

CSS。这适用于删除或添加子元素的情况。在这些情况下,边界和圆角可能会留下工件。

el:after { content: " "; }
el:before { content: " "; }

上面的答案对我都没用。我确实注意到,调整窗口大小确实会导致重绘。这对我来说很管用:

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

这似乎对我有用。另外,它根本就看不出来。

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

我有一个react组件列表,当滚动时,然后打开另一个页面,然后返回时,列表不会在Safari iOS上呈现,直到页面被滚动。这就是解决办法。

    componentDidMount() {
        setTimeout(() => {
            window.scrollBy(0, 0);
        }, 300);
    }

我们最近遇到了这个问题,并发现使用translateZ将受影响的元素提升到复合层可以修复这个问题,而不需要额外的javascript。

.willnotrender { 
   transform: translateZ(0); 
}

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