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

Chrome/Mac で DOM を強制的に再描画する: レンダリングの問題の解決策

特定の状況では、マークアップにもかかわらず、Mac 上の Chrome で HTML/CSS を正しくレンダリングできないことがあります。有効。一般的な解決策には、CSS プロパティを変更し、offsetHeight を取得して再描画を強制することが含まれます。ただし、この方法は Chrome/Mac では効率的に機能しなくなりました。

この問題に対処するには、Chrome/Mac で機能する別のアプローチとして、問題のある要素の境界線を一時的に変更します。

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

これにより、要素の位置が強制的に変更され、再描画が確実に行われます。ただし、遅延が発生し、視覚的に気が散ってしまうという欠点があります。

さらに信頼性の高い方法は、要素に空のテキスト ノードを挿入することです。

var forceRedraw = function(element){
    if (!element) { return; }
    var n = document.createTextNode(' ');
    var disp = element.style.display;
    element.appendChild(n);
    element.style.display = 'none';
    setTimeout(function(){
        element.style.display = disp;
        n.parentNode.removeChild(n);
    },20);
}

この手法では、視覚的なジャンプを必要とせずに再描画します。表示プロパティを変更してテキスト ノードを挿入すると、DOM がリフローして要素が正確に表示されます。

以上がmacOS 上の Chrome で確実に DOM 再描画を強制する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。