强制DOM重绘/刷新Chrome/Mac

每隔一段时间，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?

当前回答

2020年10月，Chrome 85仍然存在该问题。

morewry的使用transform:translateZ(0)的解决方案，实际上，任何转换工作，包括translate(0,0)和scale(1)，但如果你必须再次更新元素，那么技巧是切换转换，最好的方法是直接删除它，在一帧后，使用requestAnimationFrame (setTimeout应该总是避免，因为它会更慢，所以它可能会导致故障)。

updateone元素:

    function refresh_element(node) {
        // you can use scale(1) or translate(0, 0), etc
        node.style.setProperty('transform', 'translateZ(0)');
        // this will remove the property 1 frame later
        requestAnimationFrame(() => {
            node.style.removeProperty('transform');
        });
    }

2020-10-05 23:50:08

其他回答

下面的css适用于我的IE 11和Edge，不需要JS。 scaleY(1)在这里起作用。这似乎是最简单的解决办法。

.box {
    max-height: 360px;
    transition: all 0.3s ease-out;
    transform: scaleY(1);
}
.box.collapse {
    max-height: 0;
}

2019-07-16 05:38:28

它帮助了我

domNodeToRerender.style.opacity = 0.99;
setTimeout(() => { domNodeToRerender.style.opacity = '' }, 0);

2019-11-26 16:05:47

我想返回所有的状态到以前的状态(无需重新加载)，包括jquery添加的元素。上面的实现不能工作。我是这样做的。

// Set initial HTML description
var defaultHTML;
function DefaultSave() {
  defaultHTML = document.body.innerHTML;
}
// Restore HTML description to initial state
function HTMLRestore() {
  document.body.innerHTML = defaultHTML;
}



DefaultSave()
<input type="button" value="Restore" onclick="HTMLRestore()">

2019-02-21 07:13:54

调用window.getComputedStyle()应该强制回流

2014-03-10 09:42:01

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

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

2014-08-02 09:17:40

强制DOM重绘/刷新Chrome/Mac

推荐文章

最新文章

标签