Mac 版 Chrome で DOM を強制更新する

有効な HTML と CSS があるにもかかわらず、Mac 上の Chrome で要素が正しくレンダリングされなかったり、レンダリングが無視されたりすることがあります。それらは完全に。インスペクターを使用して DOM を検査すると問題が解決されることがよくありますが、Chrome が意図的に再描畫を回避する場合もあります。

他のブラウザと OS の組み合わせで機能する一般的な再描畫/更新ハックには、未使用の CSS プロパティを変更し、一部の CSS プロパティを取得することが含まれます。情報を使用して再描畫をトリガーし、プロパティの変更を元に戻します。

ただし、この方法は Chrome for Mac では失敗します。より複雑な解決策を採用する必要がありました:

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

このメソッドは要素を視覚的にジャンプさせ、再描畫を強制します。ただし、タイムアウトを 500 ミリ秒未満に短縮すると、要素が元の狀態(tài)に戻る前にブラウザが再描畫され、効果が無効になる可能性があります。

代替の再描畫方法

別の単純な更新必要な要素の親コンテナを非表示にし、すぐに表示する方法で十分かもしれません。 redrawing.

// 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 を強制的に更新するにはどうすればよいですか?の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。