强制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?

当前回答

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

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

2015-04-29 14:14:07

其他回答

我想返回所有的状态到以前的状态(无需重新加载)，包括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

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

.willnotrender { 
   transform: translateZ(0); 
}

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

2015-01-15 19:56:29

Html:示例

<section id="parent">
  <article class="child"></article>
  <article class="child"></article>
</section>

Js：

  jQuery.fn.redraw = function() {
        return this.hide(0,function() {$(this).show(100);});
        // hide immediately and show with 100ms duration

    };

调用函数:

$ (' article.child ') .redraw ();/ / < = =坏主意

$('#parent').redraw();

2014-10-30 18:08:13

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

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

2019-03-06 15:12:38

这是我解决内容消失的方法……

<script type = 'text/javascript'>
    var trash_div;

    setInterval(function()
    {
        if (document.body)
        {
            if (!trash_div)
                trash_div = document.createElement('div');

            document.body.appendChild(trash_div);
            document.body.removeChild(trash_div);
        }
    }, 1000 / 25); //25 fps...
</script>

2016-02-15 15:03:33

强制DOM重绘/刷新Chrome/Mac

推荐文章

最新文章

标签