Bagaimana untuk Memaksa DOM Redraw dalam Chrome pada macOS?

Paksa DOM Redraw pada Chrome/Mac

Isu ini timbul apabila Chrome pada peranti Mac tersalah memaparkan elemen HTML/CSS yang sah. Semasa memeriksa DOM sering mencetuskan lukisan semula yang betul, penggodaman ini gagal pada Chrome/Mac disebabkan oleh pengoptimuman yang menghalang offsetHeight daripada mencetuskan lukisan semula.

Godam berikut ialah penyelesaian:

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

Ini memaksa elemen untuk melompat sedikit, yang mencetuskan lukisan semula. Walau bagaimanapun, kelewatan itu ketara.

Alternatifnya ialah menggunakan kaedah ini sebaliknya:

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

// in plain js
document.getElementById('parentOfElementToBeRedrawn').style.display = 'none';
document.getElementById('parentOfElementToBeRedrawn').style.display = 'block';

Ini menyembunyikan dan kemudian menunjukkan elemen induk, memaksa lukisan semula.

Jika kaedah ini gagal, fungsi berikut menjamin lukisan semula dengan 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
}

Ini teknik pada asasnya memaksa aliran semula, mengemas kini reka letak dan mencetuskan lukisan semula.

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!