Wie erzwinge ich eine DOM-Neuzeichnung in Chrome für Mac?

So erzwingen Sie ein DOM-Neuzeichnen in Chrome für Mac

Bei der Webentwicklung ist es manchmal notwendig, den Browser zum Neuzeichnen oder Aktualisieren zu zwingen DOM (Dokumentobjektmodell). Während es verschiedene Ansätze gibt, die in den meisten Browsern funktionieren, stellt Chrome für Mac eine einzigartige Herausforderung dar.

Die Standardtechnik, eine nicht verwendete CSS-Eigenschaft zu ändern, eine Elementdimension abzufragen und die Änderung dann rückgängig zu machen, funktioniert nicht mehr Chrome für Mac. Dieses Verhalten ist auf Optimierungen zurückzuführen, die ein Neuzeichnen verhindern, wenn die Eigenschaft offsetHeight abgerufen wird.

Um diese Einschränkung zu überwinden, kann man auf eine invasivere Methode zurückgreifen:

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

Während diese Methode Folgendes gewährleistet: Beim Neuzeichnen kommt es auch zu einem sichtbaren Sprung in der Position des Elements, der unerwünscht sein kann. Ein subtilerer Ansatz, der ein Neuzeichnen garantiert, ist:

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

Dadurch wird das übergeordnete Element ausgeblendet und dann sofort angezeigt, wodurch ein Neuzeichnen erzwungen wird. Alternativ in einfachem JavaScript:

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

Für eine genauere Kontrolle über den Zeitpunkt des Neuzeichnens kann eine benutzerdefinierte Funktion definiert werden:

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
}

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