如何在 Mac 上的 Chrome 中强制刷新 DOM？

在 Mac 版 Chrome 上强制 DOM 刷新

尽管具有有效的 HTML 和 CSS，Mac 上的 Chrome 偶尔仍无法正确渲染元素或忽略渲染完全是他们。虽然通过检查器检查 DOM 通常可以解决问题，但在某些情况下，Chrome 会故意避免重绘。

适用于其他浏览器操作系统组合的常见重绘/刷新技巧涉及修改未使用的 CSS 属性，获取一些触发重绘的信息，然后恢复属性更改。

但是，此方法在 Chrome for Mac 中失败。必须采用更复杂的解决方案：

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

此方法会导致元素明显跳跃，从而强制重绘。但是，将超时减少到 500 毫秒以下可能会导致浏览器在元素恢复到原始状态之前重新绘制，从而使效果无效。

替代重绘方法

另一种简单刷新可能就足够的方法是隐藏然后立即显示需要的元素的父容器重绘。

// jQuery
$('#parentOfElementToBeRedrawn').hide().show(0);

// Plain JavaScript
document.getElementById('parentOfElementToBeRedrawn').style.display = 'none';
document.getElementById('parentOfElementToBeRedrawn').style.display = 'block';

为了更彻底的重绘，可以在元素中插入和删除空文本节点：

var forceRedraw = function(element){

  if (!element) { return; }

  var n = document.createTextNode(' ');
  var disp = element.style.display;  // don't worry about previous display style

  element.appendChild(n);
  element.style.display = 'none';

  setTimeout(function(){
      element.style.display = disp;
      n.parentNode.removeChild(n);
  },20); // you can play with this timeout to make it as short as possible
}

这会强制进行重排，如 Paul Irish 所描述的： http://paulirish.com/2011/dom-html5-css3-performance/

以上是如何在 Mac 上的 Chrome 中强制刷新 DOM？的详细内容。更多信息请关注PHP中文网其他相关文章！