Wie erzwinge ich DOM-Neuzeichnungen in Chrome unter macOS?

DOM-Neuzeichnung auf Chrome/Mac mit verschiedenen Ansätzen erzwingen

In bestimmten Szenarien kann Chrome auf dem Mac HTML-/CSS-Elemente möglicherweise nicht korrekt neu zeichnen , auch wenn der Code gültig ist. Um dieses Problem zu beheben, erzwingen Entwickler häufig eine Neuzeichnung mithilfe von CSS-Transformationen oder Randmanipulationen.

Der Standardansatz mit CSS-Transformationen umfasst das vorübergehende Ändern der Eigenschaft „-webkit-transform“ und das Abrufen der auszulösenden OffsetHeight ein Neuzeichnen und anschließendes Wiederherstellen des ursprünglichen Transformationswerts. Diese Methode funktioniert jedoch nicht auf Chrome/Mac.

Um diese Einschränkung zu überwinden, besteht ein alternativer Ansatz darin, die Rahmeneigenschaft umzuschalten, wodurch das Element effektiv gezwungen wird, leicht zu springen und dann in seinen ursprünglichen Zustand zurückzukehren. Dieser Ansatz erfordert eine Zeitüberschreitung, um sicherzustellen, dass ausreichend Zeit für die Neuzeichnung bleibt.

Eine andere in der Antwort vorgeschlagene Methode besteht darin, das übergeordnete Element des Elements, das neu gezeichnet werden muss, auszublenden und anzuzeigen. Dieses einfache Neuzeichnen kann in den meisten Fällen ausreichen.

Für komplexere Situationen fügt die Funktion „forceRedraw“ einen leeren Textknoten in das Element ein und entfernt ihn dann, wodurch ein Neuzeichnen garantiert wird. Das Timeout in dieser Funktion steuert die Geschwindigkeit des visuellen Sprungs.

Grundlegendes zum erzwungenen Reflow

Die hier beschriebenen Techniken zielen darauf ab, einen „Reflow“ zu erzwingen, einen Prozess, durch den Der Browser berechnet das Layout eines Dokuments neu. Durch das Auslösen eines Reflows stellen diese Methoden sicher, dass der Browser die betroffenen Elemente korrekt darstellt.

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