Chrome/Mac で DOM 再描画を強制する
この問題は、Mac デバイス上の Chrome が有効な HTML/CSS 要素を誤ってレンダリングする場合に発生します。 DOM を検査すると正しい再描画がトリガーされることがよくありますが、このハックは、offsetHeight による再描画のトリガーを妨げる最適化により、Chrome/Mac では失敗します。
次のハックは回避策です:
$(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 中国語 Web サイトの他の関連記事を参照してください。