Wie erzwinge ich eine DOM-Neuzeichnung in Chrome unter macOS?

DOM-Neuzeichnung auf Chrome/Mac erzwingen

Dieses Problem tritt auf, wenn Chrome auf Mac-Geräten gültige HTML-/CSS-Elemente falsch rendert. Während die Überprüfung des DOM häufig eine korrekte Neuzeichnung auslöst, schlägt dieser Hack auf Chrome/Mac aufgrund von Optimierungen fehl, die verhindern, dass offsetHeight eine Neuzeichnung auslöst.

Der folgende Hack ist eine Problemumgehung:

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

Dadurch wird das Element zu einem leichten Sprung gezwungen, der ein Neuzeichnen auslöst. Die Verzögerung ist jedoch spürbar.

Eine Alternative besteht darin, stattdessen diese Methode zu verwenden:

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

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

Dadurch wird das übergeordnete Element ausgeblendet und dann angezeigt, wodurch ein Neuzeichnen erzwungen wird.

Wenn diese Methode fehlschlägt, garantiert die folgende Funktion ein Neuzeichnen, indem sie einen leeren Textknoten in das Element einfügt:

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
}

Diese Technik erzwingt im Wesentlichen a Reflow, Aktualisierung des Layouts und Auslösen eines Neuzeichnens.

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