猿问

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

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

每隔一段时间,Chrome就会呈现出完全有效的HTML/CSS,或者根本不正确。深入了解DOM检查器通常足以使它认识到其方法的错误并正确地重新绘制,因此可以证明标记是好的。在我正在进行的项目中,这种情况经常发生(而且可以预见),我已经将代码放置在适当的位置,以便在某些情况下强制进行重绘。

这在大多数Browser/OS组合中都能实现:

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

如所示,调整一些未使用的CSS属性,然后请求一些强制重绘的信息,然后解压该属性。不幸的是,ChromeforMac背后的聪明团队似乎找到了一种不用重画就能得到偏移HL.8的方法。从而杀死另一个有用的黑客。

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

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

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

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


慕村225694
浏览 771回答 3
3回答

一只名叫tom的猫

以上的答案对我都没有用。我确实注意到调整大小我的窗户确实导致了一次重绘。所以这件事是为我做的:$(window).trigger('resize');
随时随地看视频慕课网APP
我要回答