Bagaimana untuk Memaksa DOM Redraw dalam Chrome pada Mac?

Paksa DOM Redraw pada Chrome/Mac

Masalah:
Dalam Chrome untuk Mac, memaksa lukisan semula menggunakan helah offsetHeight biasa tidak berfungsi.

Semasa Hack:
Penyelesaian melibatkan penambahan dan pengalihan sempadan untuk memaksa elemen melompat secara visual. Walau bagaimanapun, ia memperkenalkan kelewatan yang ketara dan mungkin tidak berkesan pada tamat masa yang lebih rendah.

Penyelesaian Cadangan:
Pendekatan alternatif yang telah terbukti berjaya ialah:

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

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

Penyelesaian yang Diperbaiki:
Untuk lukisan semula yang lebih terjamin, kaedah berikut memasukkan teks kosong nod 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); // Adjust timeout as needed
};

Pendekatan ini memastikan lukisan semula DOM yang lengkap, yang berpotensi menangani isu pemaparan yang salah dalam Chrome untuk Mac.

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