Bagaimana untuk Memaksa Muat Semula DOM dalam Chrome pada Mac?

Paksa DOM Muat Semula pada Chrome untuk Mac

Walaupun mempunyai HTML dan CSS yang sah, Chrome pada Mac kadang-kadang gagal memaparkan elemen dengan betul atau mengabaikan pemaparan mereka sepenuhnya. Semasa memeriksa DOM melalui pemeriksa selalunya menyelesaikan isu ini, terdapat keadaan di mana Chrome sengaja mengelakkan lukisan semula.

Godam lukis semula/refresh biasa yang berfungsi untuk gabungan penyemak imbas-OS yang lain melibatkan pengubahsuaian sifat CSS yang tidak digunakan, mengambil beberapa maklumat untuk mencetuskan lukisan semula, dan kemudian mengembalikan perubahan sifat.

Walau bagaimanapun, kaedah ini gagal dalam Chrome untuk Mac. Penyelesaian yang lebih kompleks terpaksa digunakan:

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

Kaedah ini menyebabkan elemen melompat dengan jelas, yang memaksa lukisan semula. Walau bagaimanapun, mengurangkan tamat masa di bawah 500ms boleh menyebabkan penyemak imbas melukis semula sebelum elemen kembali kepada keadaan asalnya, membatalkan kesannya.

Kaedah Lukis Semula Alternatif

Satu lagi muat semula mudah kaedah yang mungkin mencukupi adalah dengan menyembunyikan dan kemudian segera tunjukkan bekas induk elemen yang diperlukan melukis semula.

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

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

Untuk lukisan semula yang lebih teliti, nod teks kosong boleh dimasukkan dan dialih keluar daripada 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 memaksa aliran semula, seperti yang diterangkan oleh Paul Irish: http://paulirish.com/2011/dom-html5-css3-performance/

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