如何在 macOS 上的 Chrome 中強制 DOM 重繪？

在Chrome/Mac 上強制DOM 重繪

當Mac 裝置上的Chrome 錯誤地呈現有效的HTML/CSS 元素時，就會出現此問題。雖然檢查 DOM 通常會觸發正確的重繪，但由於優化阻止了 offsetHeight 觸發重繪，此 hack 在 Chrome/Mac 上失敗。

以下 hack 是一種解決方法：

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

這會迫使元素稍微跳躍，從而觸發重繪。但是，延遲是顯而易見的。

另一種方法是使用此方法：

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

// in plain js
document.getElementById('parentOfElementToBeRedrawn').style.display = 'none';
document.getElementById('parentOfElementToBeRedrawn').style.display = 'block';

此方法會隱藏然後顯示父元素，強制重繪。

如果此方法失敗，則以下函數透過將空文本節點插入到element:

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
}

這種技術本質上是強制回流，更新佈局並觸發重繪。

以上是如何在 macOS 上的 Chrome 中強制 DOM 重繪？的詳細內容。更多資訊請關注PHP中文網其他相關文章！