Heim > Web-Frontend > js-Tutorial > Wie erzwinge ich eine DOM-Neuzeichnung auf Chrome/Mac?

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

Mary-Kate Olsen
Freigeben: 2024-11-29 05:02:13
Original
400 Leute haben es durchsucht

How to Force a DOM Redraw on 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'
Nach dem Login kopieren

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);
Nach dem Login kopieren

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);
Nach dem Login kopieren
  • Einfügen eines leeren Textknotens in das Element:
var forceRedraw = function(element) {
    ...
}
Nach dem Login kopieren

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!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage