Von Zeit zu Zeit rendert Chrome perfekt gültiges HTML / CSS falsch oder gar nicht. Das Durchstöbern des DOM-Inspektors reicht oft aus, um den Fehler auf seinen Wegen zu erkennen und korrekt neu zu zeichnen. Daher ist das Markup nachweislich gut. Dies passiert in einem Projekt, an dem ich arbeite, häufig (und vorhersehbar) genug, dass ich Code eingerichtet habe, um unter bestimmten Umständen ein Neuzeichnen zu erzwingen.
Dies funktioniert in den meisten Browser / Betriebssystem-Kombinationen:
el.style.cssText += ';-webkit-transform:rotateZ(0deg)'
el.offsetHeight
el.style.cssText += ';-webkit-transform:none'
Optimieren Sie wie in eine nicht verwendete CSS-Eigenschaft, fordern Sie Informationen an, die ein erneutes Zeichnen erzwingen, und deaktivieren Sie dann die Eigenschaft. Leider scheint das kluge Team hinter Chrome für den Mac einen Weg gefunden zu haben, diese Offset-Höhe zu erreichen, ohne sie neu zu zeichnen. So wird ein ansonsten nützlicher Hack getötet.
Das Beste, was ich mir bisher ausgedacht habe, um den gleichen Effekt auf Chrome / Mac zu erzielen, ist dieses Stück Hässlichkeit:
$(el).css("border", "solid 1px transparent");
setTimeout(function()
{
$(el).css("border", "solid 0px transparent");
}, 1000);
Wie in, zwingen Sie das Element tatsächlich, ein wenig zu springen, kühlen Sie dann eine Sekunde und springen Sie es zurück. Erschwerend kommt hinzu, dass wenn Sie dieses Zeitlimit unter 500 ms fallen lassen (wo es weniger auffällt), es oft nicht den gewünschten Effekt hat, da der Browser nicht zum Neuzeichnen kommt, bevor er in seinen ursprünglichen Zustand zurückkehrt.
Möchte jemand eine bessere Version dieses Redraw / Refresh-Hacks (vorzugsweise basierend auf dem ersten Beispiel oben) anbieten, die auf Chrome / Mac funktioniert?
quelle
Antworten:
Ich bin mir nicht sicher, was genau Sie erreichen möchten, aber dies ist eine Methode, die ich in der Vergangenheit mit Erfolg angewendet habe, um den Browser zum Neuzeichnen zu zwingen. Vielleicht funktioniert sie für Sie.
Wenn dieses einfache Neuzeichnen nicht funktioniert, können Sie es versuchen. Es fügt einen leeren Textknoten in das Element ein, der ein erneutes Zeichnen garantiert.
EDIT: Als Reaktion auf Šime Vidas würden wir hier einen erzwungenen Reflow erreichen. Weitere Informationen erhalten Sie vom Meister selbst. Http://paulirish.com/2011/dom-html5-css3-performance/
quelle
.hide().show(0)
für ein Element tun (ich habe die Seitenfußzeile gewählt).Keine der oben genannten Antworten hat bei mir funktioniert. Ich habe festgestellt, dass die Größenänderung meines Fensters zu einem Neuzeichnen führte. Das hat es also für mich getan:
quelle
$(window).trigger('resize')
jedoch nicht. Es wird nur das Ereignis "Größenänderung" ausgelöst, das den zugehörigen Handler auslöst, wenn er zugewiesen ist.Wir sind kürzlich darauf gestoßen und haben festgestellt, dass das Heraufstufen des betroffenen Elements auf eine zusammengesetzte Ebene mit translateZ das Problem behoben hat, ohne dass zusätzliches Javascript erforderlich ist.
Da diese Malprobleme hauptsächlich in Webkit / Blink auftreten und dieses Update hauptsächlich auf Webkit / Blink abzielt, ist es in einigen Fällen vorzuziehen. Zumal viele JavaScript-Lösungen einen Reflow und ein Repaint verursachen , nicht nur ein Repaint.
quelle
neon-animated-pages
. Vielen Dank: +1:Diese Lösung ohne Timeouts! Echte Kraft neu zeichnen! Für Android und iOS.
quelle
Das funktioniert bei mir. Kudos gehen hier .
quelle
$().hide().show(0)
show()
unterscheidet sichshow(0)
darin, dass es durch Angabe einer Dauer in letzterem durch jQuery-Animationsmethoden in einem Timeout ausgelöst wird und nicht sofort, was Zeit zum Rendern auf die gleiche Weisehide(0, function() { $(this).show(); })
gibt .Wenn Sie ein Element ausblenden und dann innerhalb eines setTimeout von 0 erneut anzeigen, wird ein Neuzeichnen erzwungen.
quelle
myElement.getBoundingClientRect()
die zwischengespeichert wurde, wahrscheinlich aus Optimierungs- / Leistungsgründen. Ich habe einfach ein Zeitlimit von null Millisekunden für die Funktion hinzugefügt, die das neue Element zum DOM hinzufügt und die neuen Werte abruft, nachdem das alte Element mit den vorherigen (zwischengespeicherten) Werten aus dem DOM entfernt wurde.Dies scheint den Trick für mich zu tun. Außerdem wird es überhaupt nicht angezeigt.
quelle
Aufruf
window.getComputedStyle()
sollte einen Reflow erzwingenquelle
offsetHeight
Eigenschaft brauchte, die nicht CSS ist.Ich bin heute in OSX El Capitan mit Chrome v51 auf diese Herausforderung gestoßen. Die betreffende Seite hat in Safari einwandfrei funktioniert. Ich habe fast jeden Vorschlag auf dieser Seite ausprobiert - keiner hat richtig funktioniert - alle hatten Nebenwirkungen ... Am Ende habe ich den folgenden Code implementiert - super einfach - keine Nebenwirkungen (funktioniert immer noch wie zuvor in Safari).
Lösung: Schalten Sie nach Bedarf eine Klasse für das problematische Element um. Bei jedem Umschalten wird ein Neuzeichnen erzwungen. (Ich habe jQuery verwendet, aber Vanille-JavaScript sollte kein Problem sein ...)
jQuery Class Toggle
CSS-Klasse
Und das ist es...
HINWEIS: Sie müssen das Snippet unter "Ganzseite" ausführen, um den Effekt zu sehen.
quelle
Rufen Sie diese Funktion nach 500 Millisekunden auf.
quelle
Wenn Sie die in Ihren Stylesheets deklarierten Stile beibehalten möchten, verwenden Sie besser Folgendes:
Hinweis: Beim neuesten Webkit / Blink ist das Speichern des Werts von
offsetHeight
obligatorisch, um das Repaint auszulösen. Andernfalls überspringt die VM (zu Optimierungszwecken) diese Anweisung wahrscheinlich.Update: In der zweiten
offsetHeight
Lesung muss verhindert werden, dass der Browser eine folgende Änderung der CSS-Eigenschaft / Klasse mit der Wiederherstellung desdisplay
Werts in die Warteschlange stellt / zwischenspeichert (auf diese Weise sollte ein CSS-Übergang gerendert werden, der folgen kann).quelle
// <== schlechte Idee$('article.child').redraw();
quelle
.fadeIn(1)
statt.show(300)
für mich - das Element nicht herumschieben. Also ich denke, es ist das Auslösen vondisplay:none
und zurück zublock
Ein Ansatz, der für mich im IE funktioniert hat (ich konnte die Anzeigetechnik nicht verwenden, da es eine Eingabe gab, die den Fokus nicht verlieren darf).
Es funktioniert, wenn Sie einen Rand von 0 haben (das Ändern der Polsterung funktioniert auch)
quelle
Nur CSS. Dies funktioniert in Situationen, in denen ein untergeordnetes Element entfernt oder hinzugefügt wird. In diesen Situationen können Ränder und abgerundete Ecken Artefakte hinterlassen.
quelle
Mein Fix für IE10 + IE11. Grundsätzlich passiert, dass Sie einen DIV innerhalb eines Wrapping-Elements hinzufügen, das neu berechnet werden muss. Dann entfernen Sie es einfach und voila; klappt wunderbar :)
quelle
Die meisten Antworten erfordern die Verwendung einer asynchronen Zeitüberschreitung, die ein störendes Blinken verursacht.
Aber ich habe mir dieses ausgedacht, das reibungslos funktioniert, weil es synchron ist:
quelle
Dies ist meine Lösung, die zum Verschwinden von Inhalten funktioniert hat ...
quelle
Ich bin auf ein ähnliches Problem gestoßen, und diese einfache Zeile von JS hat geholfen, es zu beheben:
In meinem Fall war es ein Fehler mit einer Chrome-Erweiterung, die die Seite nicht neu zeichnete, nachdem das CSS innerhalb der Erweiterung geändert wurde.
quelle
Ich wollte alle Zustände auf den vorherigen Zustand zurücksetzen (ohne neu zu laden), einschließlich der von jquery hinzugefügten Elemente. Die obige Implementierung wird nicht funktionieren. und ich tat wie folgt.
quelle
Ich hatte eine Reaktionskomponentenliste, die beim Scrollen eine andere Seite öffnete und bei der Rückkehr die Liste unter Safari iOS erst gerendert wurde, wenn die Seite gescrollt wurde. Das ist also die Lösung.
quelle
Unten funktioniert CSS für mich unter IE 11 und Edge, kein JS erforderlich.
scaleY(1)
macht den Trick hier. Scheint die einfachste Lösung zu sein.quelle
Es hat mir geholfen
quelle
2020: Leichter und stärker
Die vorherigen Lösungen funktionieren bei mir nicht mehr.
Ich denke, Browser optimieren den Zeichenprozess, indem sie immer mehr "nutzlose" Änderungen erkennen.
Diese Lösung lässt den Browser einen Klon zeichnen, um das ursprüngliche Element zu ersetzen. Es funktioniert und ist wahrscheinlich nachhaltiger:
getestet auf Chrome 80 / Edge 80 / Firefox 75
quelle