Mac 上の Chrome で DOM の再描画を強制する方法

Chrome/Mac で DOM の再描画を強制する

問題:
Chrome for Mac で再描画を強制する一般的な offsetHeight トリックを使用しても機能しません。

Currentハック:
回避策には、要素を視覚的にジャンプさせるために境界線を追加および削除することが含まれます。ただし、顕著な遅延が発生し、タイムアウトが短い場合は効果的でない可能性があります。

提案された解決策:
成功したことが証明されている代替アプローチは次のとおりです:

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

// in plain JS
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;
  element.appendChild(n);
  element.style.display = 'none';
  setTimeout(function() {
    element.style.display = disp;
    n.parentNode.removeChild(n);
  }, 20); // Adjust timeout as needed
};

このアプローチにより、完全な DOM 再描画が保証され、Chrome for Mac での正しくないレンダリングの問題が解決される可能性があります。

以上がMac 上の Chrome で DOM の再描画を強制する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。