Kann ich etwas tun, über "repaints auf scroll" - Warnung in Chrome für "overflow:scroll" - div

In den Chrome DevTools, unter-Rendering, gibt es eine option "Show Potenzial scroll-Engpässe".

Wenn ich diese Einstellung aktiviert, einige div Elemente, die ich auf dem Bildschirm mit overflow:scroll zeigen einer fahne an der Spitze, die sagen "neu auf Blättern."

Ich kann nicht finden, eine Menge an Dokumentation zu diesem feature und ich weiß nicht, ob es etwas kann ich eigentlich beheben oder zu verbessern, oder einfach nur eine Feststellung von Tatsachen - die divs Inhalte haben, und Sie tatsächlich scrollen.

InformationsquelleAutor user888734 | 2014-07-14
  1. 53

    Können Sie dieses CSS auf die div mit overflow: scroll oder overflow: auto schaffen scrollen Engpässe.

    transform: translateZ(0);
-webkit-transform: translateZ(0);

    Wird, zwingen Sie den browser, um eine neue Ebene zu erstellen, um Farbe dieses element, und manchmal fix-scroll-Engpässe (vor allem mit Webkit).

    • Dieser funktioniert. Markiert werden soll, als eine Antwort.
    • Google unterstützt nun die unprefixed translateZ
    • Ich denke -webkit-backface-visibily: hidden sollte auch funktionieren.
    • das funktioniert auch, aber du hast es falsch geschrieben, und im Idealfall sollten Sie alle vendor-Präfixe: -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden;
    • Ah, du hast Recht @Chris Barr. Ich in der Regel die Rechtschreibprüfung besser. Die webkit Präfix könnte gut sein für ältere browser-Versionen. Für mozilla-ich denke, es ist vielleicht nicht notwendig, dass der browser scheint Griff Malt anders - wie mit großen Blöcken von fixed position zum Beispiel. Aber ich denke, das kommt auf die genaue groß - / Kleinschreibung, die ist nicht wirklich gegeben, hier.
    • transform: translateZ(0) ist der alte Weg. will-change: transform ist die neue Art, aber nicht IE11/Edge-Unterstützung.
    • Können Sie näher erläutern, was Sie meinen, wenn Sie sagen, dass der browser eine neue Ebene zu malen, die Elemente? Ich würde gerne verstehen, warum das funktioniert
    • Bis alle modernen Browser können das Problem beheben mit dem "wird-sich-ändern", dies sollte weiterhin bekannt sein, wie die richtige Antwort
    • Funktioniert das in der Chrom browser? Ich bin mit Probleme mit der Maus-Rad

    InformationsquelleAutor lepix
  2. 21

    Obwohl die akzeptierte Antwort das problem löst, ist es lohnt ein Blick auf die CSS - wird-ändern Eigenschaft. Diese ist bevorzugt über transform: translateZ(0); in der letzten Zeit. Hier ist ein Artikel erklärt die Unterschiede im detail - https://dev.opera.com/articles/css-will-change-property/

    .scroll-container {
  will-change: transform;
}
    • Dies sollte die bevorzugte Antwort, weil es nicht ein hack im Gegensatz zu den oberen.
    • Merkwürdig zwar, will-change: scroll-position scheint keine Wirkung haben.
    • So sollte ich beide verwenden, um die Unterstützung für ältere Browser?
    • dieses Update ein seltsames performance-Problem auf unseren Seiten mit scroll-Bereich
    InformationsquelleAutor msenni
  3. 16

    Diese erstaunlich nahm mich mehrere Tage auf die Spur, was Los war, und erst da sah ich das die Seite, Kommentar am Ende einen bug-report an
    Chromium bugtracker Problem 514303    . Hier ist, was Los ist und wie es zu lösen ist:

    Gibt es ein Konzept namens "LCD-text", die ich glauben, bedeutet, subpixel-antialiasing, also "schärfer schärfer text". Leider dieses feature ist inkompatibel mit dem compositor-beschleunigtes scrollen.

    LCD-text ist standardmäßig aktiviert (zumindest auf Blink/Webkit?) auf allen Plattformen, die nicht high-DPI (die meisten normalen Monitore; d.h. Sie können überprüfen console.log(devicePixelRatio)). Auf der anderen Seite LCD-text ist standardmäßig DEAKTIVIERT auf high-DPI-Geräte (denke, Retina-display, oder die meisten mobilen Geräte und Tabletten), da Sie nicht wirklich brauchen eine "schärfere schärfere text" - Funktion auf high-DPI-Plattformen.

    Also das Gegenteil gilt für die compositor-beschleunigtes scrollen: es ist nur möglich, auf high-DPI Plattform, wo LCD-text deaktiviert ist.

    Können Sie jedoch erzwingen, compositor-beschleunigt das scrollen auf den meisten Monitoren durch die Förderung der overflow:scroll element auf einer eigenen Ebene, entweder durch hinzufügen will-change:transform auf das element, oder jedem hackish-äquivalent wird die Kraft von den überlauf-element das übergeordnete Element eine eigene Ebene (wie transform:translateZ(0)). (Bitte beachten Sie, dass die vendor-Präfixe entfernt werden.)

    tl;dr: Chrom nicht angenommen, beide subpixel-antialiasing UND das gpu-assisted scrollen; wählen Sie eine oder das andere. Subpixel-antialiasing ist die Standard-pick auf Chrom (außer auf Handys und retina-displays, denn Ihr text ist so klein, dass Sie brauchen nicht die Funktion, so dass Sie nicht merken, dass dieses Problem auf diesen Plattformen). Überschreiben Sie diese, indem das element in seiner eigenen compositor Layer mit will-change:transform (aber beachten Sie, dass Sie vielleicht Ihr text wird nicht von crystal perfekt).

    InformationsquelleAutor ninjagecko
  4. -6

    Nope, du kannst nicht ändern, es ist ein Chrome-Funktion ermöglicht es Ihnen zu wissen, was gemalt jedes update in dem Fenster.

    Updates können eine Menge verschiedener Dinge (schriftrolle, mousemove, Intervall, requestanimationframe,...).

    Aber, jetzt Sie wissen, Sie können verbessern Sie Ihre code.

    Wenn (ich weiß nicht), den browser immer wieder malen ein div wenn es um die überlauf-scrollen Sie vielleicht tun können, einige JS zu setzen, um overflow hidden wenn sich der Bildschirm...

    Dieser Beitrag sprechen über verschiedene Browser layout

    InformationsquelleAutor Jordan
Schreibe einen Kommentar