Bagaimana untuk Memaksa DOM Redraw/Refresh dalam Chrome untuk Mac?

Paksa DOM Semula/Muat Semula dalam Chrome untuk Mac

Apabila Chrome untuk Mac menemui HTML/CSS yang sah, ia kadangkala memaparkan elemen secara salah atau tidak sama sekali. Semasa memeriksa DOM dalam konsol penyemak imbas biasanya mencetuskan lukisan semula, penyelesaian yang lebih automatik adalah wajar.

Coretan JS berikut berfungsi dengan berkesan dalam kebanyakan penyemak imbas dan sistem pengendalian:

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

Walau bagaimanapun, Chrome untuk Mac memintas lukisan semula yang dicetuskan oleh offsetHeight. Penyelesaian adalah dengan menggunakan setTimeout untuk menukar sempadan elemen buat sementara waktu, memaksa lukisan semula:

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

Pendekatan ini menyusahkan dan ketara. Kaedah yang lebih cekap untuk memaksa lukisan semula pada Chrome untuk Mac ialah memasukkan nod teks kosong ke dalam elemen:

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
}

Pendekatan ini menjamin lukisan semula dan lebih cekap daripada kaedah sempadan.

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