Chrome/Mac で DOM を強制的に再描画するにはどうすればよいですか?

Chrome/Mac での DOM の強制再描画

Mac 上の Chrome でレンダリングの問題が発生すると、最適化により再描画をトリガーする従来の方法が失敗します。ブラウザに実装されています。この記事では、親要素の可視性の操作を利用して、offsetHeight プロパティに依存せずに再描画を強制する別のアプローチを検討します。

再描画のための一般的なハック

他のブラウザの組み合わせの場合、次のハックは効果的に再描画をトリガーします:

el.style.cssText += ';-webkit-transform:rotateZ(0deg)'
el.offsetHeight
el.style.cssText += ';-webkit-transform:none'

未使用の CSS プロパティを変更することで、再計算を強制する情報 (要素の高さなど) を要求し、最後に元のプロパティを復元すると、再描画が行われます。

Chrome/Mac の最適化

残念ながら、Chrome Mac では、 redraw.

代替の再描画ハック

Chrome/Mac で再描画を強制するには、次の解決策が提案されています。

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

この方法では、要素の境界線に目に見える変化が生じ、ブラウザに再描画が強制されます。境界線が元の状態に戻る前に再描画が確実に行われるようにするには、タイムアウトが必要です。

追加オプション

再描画を強制する他の方法には次のものがあります。

• を使用して親要素を非表示にしてから再表示するjQuery:

$('#parentOfElementToBeRedrawn').hide().show(0);

• 要素への空のテキスト ノードの挿入:

var forceRedraw = function(element) {
    ...
}

これらのメソッドは、CSS 操作を必要とせずに、より直接的な再描画を保証します。

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