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

当前回答

function resizeWindow(){
    var evt = document.createEvent('UIEvents');
    evt.initUIEvent('resize', true, false,window,0);
    window.dispatchEvent(evt); 
}

在500毫秒后调用这个函数。

2016-07-07 21:35:58

其他回答

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

这个解决方案没有超时!真实力量重绘!适用于Android和iOS。

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

2014-07-15 08:40:53

我对IE10 + IE11的修复。基本上发生的情况是在必须重新计算的包装元素中添加DIV。然后去掉它，瞧;工作就像一个魅力:)

    _initForceBrowserRepaint: function() {
        $('#wrapper').append('<div style="width=100%" id="dummydiv"></div>');
        $('#dummydiv').width(function() { return $(this).width() - 1; }).width(function() { return $(this).width() + 1; });
        $('#dummydiv').remove();
    },

2015-04-07 13:20:37

2020:更轻更强

以前的解决办法对我已经不管用了。

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

这个解决方案使浏览器绘制一个克隆来替换原来的元素。它很有效，而且可能更可持续:

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

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

2020-04-03 07:50:06

我也遇到过类似的问题，这一行JS代码帮我解决了问题:

document.getElementsByTagName('body')[0].focus();

在我的情况下，这是一个错误与Chrome扩展不重新绘制页面后改变其CSS从扩展。

2017-07-07 00:42:35

强制DOM重绘/刷新Chrome/Mac

推荐文章

最新文章

标签