ホームページ > ウェブフロントエンド > jsチュートリアル > macOS 上の Chrome で DOM 再描画を強制する方法

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

Linda Hamilton
リリース: 2024-12-21 09:56:15
オリジナル
750 人が閲覧しました

How to Force a DOM Redraw in Chrome on macOS?

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート