Problem mit dem Neuzeichnen von Chrome

Ich bekomme ein seltsames Neuzeichnungsproblem in Chrome:

Sehen Sie die gebrochene rechte Seite? Das ist ein div mit einem einzigen Hintergrund img.

HTML

<div id="resultsSortFilter>
  <!-- ... -->
</div>

CSS

#resultsSortFilter {
    float: left;
    width: 712px;
    height: 109px;
    margin: 7px 0 0 8px;
    background: url('../images/search_sortfilter_bg.png') no-repeat;
}

• Keine Probleme in anderen Browsern
• Tritt nur bei neueren Versionen auf, wir haben das Update blockiert, um zu verhindern, dass dies intern Probleme verursacht.
• Scheint durch Scrollen nach oben und unten ausgelöst zu werden, bevor das Rendern abgeschlossen ist.
• Gleiche Probleme auf mehreren Seiten

Hat das noch jemand gesehen? Weiß jemand, was es verursacht oder was Chrome dagegen zu tun gedenkt?

Chrome-Version 26.0.1410.64 m

Aktualisieren

Das Problem tritt unter Windows und Mac OS auf. Tatsächlich scheint es auf dem Mac schlimmer zu sein.

Ich hätte es vielleicht noch weiter feststecken können. Wir erhalten den Fehler auf einer Seite, die viele große Bilder enthält. Ich frage mich, ob es mit der Größe der Daten zu tun hat, die Chrome herunterladen muss.

Dies scheint das Problem zu beseitigen (ich werde es nicht als Lösung bezeichnen):

„Es kann sein, dass die neuere Version von Chrome Ihre GPU einfach nicht mag. Ich hatte ähnliche Probleme wie Sie und habe sie gelöst, indem ich die Compositing- und 3D-Beschleunigungsfunktionen deaktiviert habe.

Geben Sie chrome://flags in die Adressleiste ein und legen Sie die folgenden Elemente fest:

• GPU-Compositing auf allen Seiten: Deaktiviert (Drei Optionen in einem Dropdown-Menü.)
• Beschleunigte 2D-Leinwand deaktivieren: Aktivieren (Klicken Sie auf den Link „Aktivieren“, das Kästchen wird weiß.)
• Beschleunigte CSS-Animationen deaktivieren: Aktivieren (Wie oben wird das Element weiß.)
• Klicken Sie dann auf die Schaltfläche unten auf der Seite Jetzt neu starten, um Chrome neu zu starten und zu testen, ob dies funktioniert hat.”

Aus https://askubuntu.com/questions/167140/google-chrome-with-strange-behavior

Aktualisieren

Das Problem scheint in späteren Versionen von Chrome behoben zu sein.

Chrome wird immer fehlerhafter. Etwas, das einen Versuch wert ist, ist die GPU-Hardwarebeschleunigung auf dem Element zu erzwingen.

Fügen Sie dies dem CSS hinzu, um die Hardwarebeschleunigung zu erzwingen:

-webkit-transform: translate3d(0, 0, 0);

Ich hatte Probleme damit in Webkit-Browsern, nicht nur in Chrome. Ich habe es gelöst, indem ich die folgende Regel in mein CSS eingefügt habe:

html *:not(svg) {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0); /*only in IE10*/
}

Dies wendet die Hardwarebeschleunigung auf alle Elemente an, mit Ausnahme von SVGs auf FF/IE/Safari/Chrome, falls unterstützt.

Ich wende die Transformation nicht auf SVG-Tags an, da dies aus irgendeinem Grund dazu führte, dass meine SVGs nicht richtig gerendert wurden. Seltsamerweise verursacht die Anwendung auf die Elemente wie rect innerhalb des Tags selbst keine Probleme.

Versuchen Sie also, diese Regel zu Ihrem CSS hinzuzufügen und sehen Sie, ob sie Ihr Problem löst.

Ich hatte diese Art von Problem beim Umschalten display:none; display:block;

Zum Beispiel mit jQuery.toggle()

Das fragliche Element war nur ein Wrapper für den Inhalt, den ich ein- und ausblenden wollte. Dies ist also sein übergeordnetes Element, das vertikal expandieren oder schrumpfen würde. Es würde so aussehen:

<div class="parent">
    <div class="child-to-toggle">
    </div>
</div>

child-to-toggle hatte keine Stilregeln und wenn es ausgeblendet war, wurde ein Teil des übergeordneten Elements nicht korrekt neu gezeichnet. (der untere Teil)

Dann fügte ich eine CSS-Regel zu child-to-toggle hinzu und das Problem war gelöst. Es sieht so aus, als würde das Hinzufügen einer CSS-Regel in diesem Fall ein Neuzeichnen erzwingen.

Trotz der akzeptierten Antwort füge ich diese hinzu, weil das Aktivieren der Hardwarebeschleunigung auf meinem Computer, Macbook Pro, OSX Maverick, Chrome 36, die Benutzeroberfläche mit Artefakten vollständig durcheinander bringen würde, sodass ich einen anderen Weg finden musste.

Das Hinzufügen einer CSS-Regel könnte helfen. In meinem Fall habe ich ein Border-Top zu Child-to-Toggle hinzugefügt.