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 ミリ秒未満に短縮すると、要素が元の状態に戻る前にブラウザが再描画され、効果が無効になる可能性があります。
代替の再描画方法
別の単純な更新必要な要素の親コンテナを非表示にし、すぐに表示する方法で十分かもしれません。 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 を強制的に更新するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。