Wie erzwinge ich eine DOM-Neuzeichnung in Chrome auf dem Mac?

DOM-Neuzeichnen auf Chrome/Mac erzwingen

Problem:
In Chrome für Mac wird ein Neuzeichnen erzwungen Die Verwendung des üblichen OffsetHeight-Tricks funktioniert nicht.

Aktuell Hack:
Eine Problemumgehung besteht darin, einen Rahmen hinzuzufügen und zu entfernen, um das Element optisch zu springen. Es führt jedoch zu einer spürbaren Verzögerung und ist bei kürzeren Timeouts möglicherweise nicht effektiv.

Vorgeschlagene Lösung:
Ein alternativer Ansatz, der sich als erfolgreich erwiesen hat, ist:

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

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

Verbesserte Lösung:
Für ein garantierteres Neuzeichnen fügt die folgende Methode einen leeren Textknoten in das ein Element:

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

Dieser Ansatz stellt eine vollständige Neuzeichnung des DOM sicher und behebt möglicherweise das Problem der fehlerhaften Darstellung in Chrome für Mac.

Das obige ist der detaillierte Inhalt vonWie erzwinge ich eine DOM-Neuzeichnung in Chrome auf dem Mac?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!