如何在 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中文網其他相關文章！