Wie erzwinge ich eine DOM-Neuzeichnung auf Chrome/Mac?

Erzwungenes DOM-Neuzeichnen auf Chrome/Mac

Bei Rendering-Problemen mit Chrome auf dem Mac schlagen herkömmliche Methoden zum Auslösen eines Neuzeichnens aufgrund von Optimierungen fehl im Browser implementiert. In diesem Artikel wird ein alternativer Ansatz untersucht, der die Sichtbarkeitsmanipulation des übergeordneten Elements nutzt, um ein Neuzeichnen zu erzwingen, ohne sich auf die Eigenschaft offsetHeight zu verlassen.

Gemeinsamer Hack für Neuzeichnen

In anderen Browserkombinationen , löst der folgende Hack effektiv ein Neuzeichnen aus:

el.style.cssText += ';-webkit-transform:rotateZ(0deg)'
el.offsetHeight
el.style.cssText += ';-webkit-transform:none'

Durch Ändern einer nicht verwendeten CSS-Eigenschaft und anschließendes Anfordern von Informationen, die eine erzwingen Neuberechnung (wie die Höhe des Elements) und schließlich die Wiederherstellung der ursprünglichen Eigenschaft wird ein Neuzeichnen erreicht.

Chrome/Mac-Optimierung

Leider umgeht Chrome auf dem Mac diesen Hack durch Abrufen der offsetHeight, ohne eine Neuzeichnung auszulösen.

Alternative Neuzeichnung Hack

Um ein Neuzeichnen auf Chrome/Mac zu erzwingen, wird die folgende Lösung vorgeschlagen:

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

Diese Methode führt eine sichtbare Änderung am Rand des Elements ein, die den Browser dazu zwingt neu zeichnen. Eine Zeitüberschreitung ist erforderlich, um sicherzustellen, dass die Neuzeichnung erfolgt, bevor der Rand in seinen ursprünglichen Zustand zurückkehrt.

Zusätzliche Optionen

Andere Methoden, um eine Neuzeichnung zu erzwingen, sind:

• Das übergeordnete Element ausblenden und wieder einblenden mit jQuery:

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

• Einfügen eines leeren Textknotens in das Element:

var forceRedraw = function(element) {
    ...
}

Diese Methoden gewährleisten ein direkteres Neuzeichnen ohne CSS-Manipulation.

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