Bagaimana untuk Memaksa DOM Redraw dalam Chrome pada macOS?

Paksa DOM Redraw pada Chrome/Mac: Penyelesaian kepada Isu Paparan

Dalam situasi tertentu, Chrome pada Mac boleh gagal untuk memaparkan HTML/CSS dengan betul, walaupun penanda kesahan. Penyelesaian biasa melibatkan pengubahsuaian sifat CSS dan mendapatkan semula offsetHeight untuk memaksa lukisan semula. Walau bagaimanapun, kaedah ini tidak lagi berfungsi dengan cekap dalam Chrome/Mac.

Untuk menangani isu ini, pendekatan alternatif yang berfungsi pada Chrome/Mac melibatkan menukar sempadan elemen bermasalah buat sementara waktu:

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

Ini memaksa elemen untuk meletakkan semula, memastikan lukisan semula. Walau bagaimanapun, kelemahan adalah kelewatan yang terlibat, yang boleh mengganggu penglihatan.

Kaedah yang lebih dipercayai ialah memasukkan nod teks kosong ke dalam elemen:

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);
}

Teknik ini menjamin lukis semula tanpa memerlukan lompatan visual. Dengan mengubah suai sifat paparan dan memasukkan nod teks, ia mencetuskan DOM untuk mengalir semula dan memaparkan elemen dengan tepat.

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