Bagaimana untuk Memaksa DOM Redraw dalam Chrome untuk Mac?

Cara Paksa DOM Redraw pada Chrome untuk Mac

Dalam pembangunan web, kadangkala perlu memaksa penyemak imbas melukis semula atau memuat semula DOM (Model Objek Dokumen). Walaupun terdapat pelbagai pendekatan yang berfungsi dalam kebanyakan penyemak imbas, Chrome untuk Mac menimbulkan cabaran yang unik.

Teknik standard untuk mengubah suai sifat CSS yang tidak digunakan, membuat pertanyaan untuk dimensi elemen, dan kemudian mengembalikan perubahan tidak lagi berfungsi Chrome untuk Mac. Tingkah laku ini disebabkan oleh pengoptimuman yang menghalang lukisan semula apabila sifat offsetHeight diambil.

Untuk mengatasi had ini, seseorang boleh menggunakan kaedah yang lebih invasif:

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

Sementara kaedah ini memastikan lukis semula, ia juga menyebabkan lompatan yang boleh dilihat dalam kedudukan elemen, yang boleh menjadi tidak diingini. Pendekatan yang lebih halus yang menjamin lukisan semula ialah:

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

Ini menyembunyikan dan kemudian serta-merta menunjukkan elemen induk, memaksa aliran semula. Sebagai alternatif, dalam JavaScript biasa:

document.getElementById('parentOfElementToBeRedrawn').style.display = 'none';
document.getElementById('parentOfElementToBeRedrawn').style.display = 'block';

Untuk kawalan yang lebih terperinci ke atas pemasaan lukisan semula, fungsi tersuai boleh ditakrifkan:

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
}

Atas ialah kandungan terperinci Bagaimana untuk Memaksa DOM Redraw dalam Chrome untuk Mac?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!