Bagaimana untuk Memaksa DOM Redraw pada Chrome/Mac?

Forceful DOM Redraw pada Chrome/Mac

Apabila menghadapi masalah rendering dengan Chrome pada Mac, kaedah tradisional untuk mencetuskan redraw gagal disebabkan oleh pengoptimuman dilaksanakan dalam pelayar. Artikel ini meneroka pendekatan alternatif yang memanfaatkan manipulasi keterlihatan elemen induk untuk memaksa lukisan semula tanpa bergantung pada sifat offsetHeight.

Common Hack for Redraw

Dalam kombinasi penyemak imbas lain , penggodaman berikut berkesan mencetuskan lukisan semula:

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

Dengan mengubah suai sifat CSS yang tidak digunakan, kemudian meminta maklumat yang memaksa pengiraan semula (seperti ketinggian elemen), dan akhirnya memulihkan sifat asal, lukisan semula dicapai.

Pengoptimuman Chrome/Mac

Malangnya, Chrome pada Mac memintas penggodaman ini dengan mendapatkan semula offsetHeight tanpa mencetuskan redraw.

Alternatif Redraw Hack

Untuk memaksa redraw pada Chrome/Mac, penyelesaian berikut dicadangkan:

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

Kaedah ini memperkenalkan perubahan yang boleh dilihat pada sempadan elemen, yang memaksa penyemak imbas untuk melukis semula. Tamat masa diperlukan untuk memastikan lukisan semula berlaku sebelum sempadan kembali kepada keadaan asalnya.

Pilihan Tambahan

Kaedah lain untuk memaksa lukisan semula termasuk:

• Menyembunyikan dan kemudian menyahsembunyikan elemen induk menggunakan jQuery:

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

• Memasukkan nod teks kosong ke dalam elemen:

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

Kaedah ini memastikan lukisan semula yang lebih langsung tanpa melibatkan manipulasi CSS.

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