Warum aktualisiert WebKit Stile nicht automatisch und wie kann ich ein Repaint erzwingen?

WebKit dazu zwingen, Stile zu aktualisieren

Sie stehen vor einem Problem, bei dem eine über JavaScript angewendete Stiländerung nicht auf alle betroffenen Elemente in übertragen wird WebKit-basierte Browser wie Chrome und Safari. Dies kann manchmal beobachtet werden, wenn mehrere Elemente Stile von einem gemeinsamen Vorfahren mit untergeordneten Elementen erben, die den Fokus haben oder interaktive Elemente wie Links enthalten.

WebKit reagiert nicht

WebKit reagiert nicht automatisch neu zeichnen, wenn es Aktualisierungen geerbter Stile erhält. Dies steht im Gegensatz zu anderen Browsern wie Firefox, Opera und IE, die diese Änderungen nahtloser verarbeiten.

Neulackierung durch Nudging erzwingen

Da WebKit nicht aktualisiert wird Wenn Sie Stile automatisch anpassen, können Sie eine Neulackierung erzwingen, indem Sie eine geringfügige Änderung an einem beliebigen Element auf der Seite vornehmen. Sie haben in den Chrome-Entwicklertools festgestellt, dass selbst das Deaktivieren und erneute Aktivieren eines Attributs eines beliebigen Elements die korrekte Stilaktualisierung auslöste.

Vorgeschlagene Lösung

Um programmgesteuert ein Repaint zu erzwingen können Sie die folgende Technik verwenden:

sel.style.display = 'none';
sel.offsetHeight; // no need to store this anywhere, just referencing it is sufficient
sel.style.display = '';

Bei diesem Ansatz wird das Element vorübergehend ausgeblendet und dann wieder eingeblendet. Die offsetHeight-Zeile stellt sicher, dass der Browser die Änderungen tatsächlich anwendet. Sie müssen die zurückgegebene Höhe nicht speichern.

Potenzielle Einschränkung

Die bereitgestellte Lösung funktioniert nachweislich für Elemente mit „Block“-Anzeige. Es ist möglich, dass es bei Elementen mit anderen Anzeigemodi ein anderes Verhalten zeigt, dies erfordert jedoch weitere Untersuchungen.

Das obige ist der detaillierte Inhalt vonWarum aktualisiert WebKit Stile nicht automatisch und wie kann ich ein Repaint erzwingen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!