Problem bei Verwendung von Übergängen + Opazitätsänderung + Überlauf ausgeblendet

Tatsächlich wird die border-radius nicht respektiert, wenn der Übergang stattfindet. Dies liegt an der Erstellung von Compositing-Layern für beschleunigtes Rendering und kann durch einen Blick auf die folgenden Artikel erklärt werden:

• HTML5 Rocks - Beschleunigtes Rendern in Chrome
• GPU Accelerated Compositing in Chrome .

Warum tritt das Problem nicht auf, wenn der Übergang deaktiviert ist?

• Wenn sich Stile ändern, aber keines der Kriterien erfüllt ist, die die Erstellung eines Compositing-Layers erfordern (dh keine Animation oder Übergang oder 3D-Transformation usw.):
  • Es gibt keine Compositing-Ebene und der gesamte Bereich scheint bei jeder Änderung neu zu streichen. Da ein vollständiges Repaint passiert, gibt es kein Problem.
• Sehen Sie sich das folgende Snippet (im Vollbildmodus) an, nachdem Sie "Farbattribute anzeigen" und "Zusammengesetzte Ebenenränder anzeigen" in den Dev-Werkzeugen aktiviert haben, und beachten Sie Folgendes:
  • Es werden keine Bereiche mit einem orangefarbenen Rahmen (Compositing Layer) erstellt.
  • Jedes Mal, wenn die Stile geändert werden, indem der Fokus auf eines der a -Tags gesetzt wird, wird das gesamte Gebiet neu gezeichnet (ein rot oder grün blinkender Bereich).

Warum verursacht das Hinzufügen eines Übergangs ein Problem?

• Das anfängliche Rendering hat keine Compositing-Ebene, da noch kein Übergang für das Element vorhanden ist. Sehen Sie sich das folgende Snippet an und beachten Sie, dass beim Ausführen des Snippets eine Farbe (roter oder grüner blinkender Bereich) auftritt, aber keine zusammengesetzte Ebene (Bereich mit orangefarbenem Rahmen) erstellt wird.
• Wenn der Übergang beginnt, teilt Chrome sie in verschiedene Compositing-Layer auf, wenn einige Eigenschaften wie Opazität, Transformation usw. umgestellt werden. Beachten Sie, dass zwei Bereiche mit orangefarbenen Rahmen angezeigt werden, sobald der Fokus auf einem der Anker-Tags gesetzt ist. Dies sind die Compositing-Layer, die erstellt wurden.
• Die Layer-Aufteilung erfolgt für beschleunigtes Rendering. Wie im HTML5 Rocks-Artikel erwähnt, werden die Opazitäts- und Transformationsänderungen angewendet, indem die Attribute der Compositing-Ebene geändert werden und keine Neuanstriche auftreten.
• Am Ende des Übergangs führt ein Repaint dazu, dass alle Ebenen wieder zu einer einzelnen Ebene zusammengefügt werden, da zusammengesetzte Ebenen nicht mehr anwendbar sind (basierend auf Kriterien für die Erstellung von Ebenen).

Dies veranschaulicht, dass beim Zusammenführen der Ebenen und beim vollständigen Neuzeichnen die border-radius auf der übergeordneten Ebene ebenfalls angewendet und respektiert werden. Während des Übergangs werden jedoch nur die Eigenschaften des Compositing-Layers geändert, sodass der Layer die Eigenschaften anderer Layer nicht zu kennen scheint und somit nicht den Rand-Radius des Parents berücksichtigt.

Ich gehe davon aus, dass dies auf die Funktionsweise von Layern zurückzuführen ist. Jede Ebene ist eine Software-Bitmap, und so wird es gleichwertig mit einem kreisförmigen Bild und einem darauf platzierten div . Das würde natürlich nicht zu einer Beschneidung des Inhalts führen.

Der Kommentar in diesem Fehler-Thread scheint auch zu bestätigen, dass ein Repaint auftritt, wenn ein separater Layer vorhanden ist nicht mehr erforderlich.

  

Wir wollen neu zeichnen, wenn "eigene Ebene wird" geändert wird

^{Hinweis: Obwohl sie Chrome-spezifisch sind, sollte das Verhalten in anderen auch ähnlich sein.}

Was ist die Lösung?

Die Lösung scheint darin zu bestehen, einen separaten Stapelkontext für das übergeordnete Element ( .qs-timer ) zu erstellen. Das Erstellen eines separaten Stapelkontexts scheint zu einer separaten Compositing-Ebene zu führen, die für das Elternelement erstellt wird. Dadurch wird das Problem gelöst.

Wie von BoltClock in diese Antwort erwähnt, kann jeder von Die folgenden Optionen würden einen separaten Stapelkontext für das übergeordnete Element erstellen und das Ausführen eines dieser Probleme scheint das Problem zu beheben.

• Setzen Sie z-index auf dem übergeordneten .qs-timer auf etwas anderes als auto.

  %Vor% %Vor% %Vor%

• Einstellung von opacity auf etwas weniger als 1. Ich habe 0,99 im folgenden Snippet verwendet, da es keinen visuellen Unterschied verursacht.

  %Vor% %Vor% %Vor%

• Hinzufügen eines transform zum Element. Ich habe translateZ(0px) im folgenden Snippet verwendet, da dies auch keinen visuellen Unterschied erzeugt.

  %Vor% %Vor% %Vor%

Die ersten zwei Ansätze sind besser als die dritten, weil der dritte nur auf einem Browser funktioniert, der CSS-Transformationen unterstützt.

Ja, das Hinzufügen von opacity: 0.99; zu .qs-timer issue wird behoben.

Wenn Opazität: 1 ODER NICHT definieren:
In diesem speziellen Fall gibt es keine Transparenz, so dass gfx die teuren Dinge vermeiden könnte.

Falls Deckfähigkeit: 0.99:
nsIFrame::HasOpacity() entscheidet, dass es eine Deckkraft gibt, also gfx schließt wertvolle Dinge ein. (likes opacity mit border-radius )

Weitere Hilfe Sonderfall-Deckkraft: 0.99, um sie als Deckkraft zu behandeln: 1 für Grafiken , Dies ticket gibt nicht die Meinung über unser eigentliches Ziel, sondern gibt die Idee, was in CSS passiert.