Überlauf: Nicht in Chrome auf ein Pseudoelement angewendet
Ich erzeuge ein "graues Thema" - und obwohl es noch einige Verbesserungen gibt, bin ich ziemlich glücklich damit.
Aber ich bin anscheinend über ein Problem in Bezug auf die Schaltfläche in Chrome gestolpert (andere Browser scheinen in Ordnung), wo der Hover-Effekt unerwünschte Ergebnisse zu liefern scheint.
Wenn ich das Menü schwenke, dann fahre mit dem "Test Button" fort, das Pseudo-Element hält nicht an dem Rahmen-Radius fest, was eckige Ecken auf hover gibt.
Ich würde nach dem Pseudo-Element suchen, um den Grenzradius einzuhalten.
Mein Code für die Schaltfläche lautet:
Gibt es eine Möglichkeit zu verhindern, dass das Pseudo der Schaltfläche vor dem Grenzradius der tatsächlichen Elemente erscheint (der Effekt ist ein "Shine")?
Anleitung zum Reproduzieren
- Schnipsel in Chrome ausführen
- Hover radiales Menü
- Jetzt hebe den Schalter
- Sehen Sie die "eckigen Ecken" des Pseudos der Schaltfläche, wenn die Animation beendet ist.
Was ich gerade bekomme:
Was ich suche,
zu bekommen 
Ich bekomme dieses Problem (es scheint) in der neuesten Version von Chrome.
Zu beachten
Derselbe Effekt wird im radialen Menü perfekt verwendet, weshalb ich mir nicht sicher bin, warum er auf der Button-Instanz auftritt?
Gibt es einen Weg, um sicherzustellen, dass dies in der Produktion nicht auftritt, so dass diese "eckige Ecke" nicht erscheint (Problem nur in neuestem Chrom scheint es)?
Aktualisierungen
- Ein anderer Benutzer hat das gemeldet;
Klicken Sie mit der rechten Maustaste auf die Schaltfläche, klicken Sie mit der linken Maustaste auf inspect und schweben Sie kurz bevor die Dev-Tools geöffnet werden = & gt; bug (auch der "Hover-out" -Effekt hat den Fehler)
reproduziert dieses Problem.
- Und noch ein anderer Benutzer kann dieses Problem nicht reproduzieren (auf V.24)
1 Antwort
Vielleicht sollten wir alle mehr über css will-change lesen, Sie finden hier einen nützlichen Artikel hier . Es ist eine experimentelle Technologie, die derzeit von Chrome, Firefox und Opera unterstützt wird.
Die CSS-Eigenschaft "Möchte ändern" bietet Autoren die Möglichkeit, einen Hinweis zu geben Browser über die Art der zu erwartenden Änderungen an einem Element, so dass der Browser im Vorfeld entsprechende Optimierungen vornehmen kann bevor das Element tatsächlich geändert wird. Diese Art von Optimierungen kann die Reaktionsfähigkeit einer Seite potenziell erhöhen teure Arbeit vor der Zeit, bevor sie tatsächlich benötigt werden.
Es hilft Ihrem Browser, Elementübergänge mit GPU zu rendern, indem die Layer vor dem Übergang vorbereitet werden. Es hilft in diesem Fall, wir müssen nur vorsichtig sein beim Einstellen dieser Eigenschaft. Wir sollten will-change nicht für jedes Element auf der Seite festlegen, sondern sollten bestimmte Elemente im Moment des Übergangs berücksichtigen. Deshalb sollten wir :hover state für das übergeordnete Element wie folgt verwenden:
.will-change ist die Klasse des übergeordneten Elements. Details zum aktualisierten CodePen finden Sie hier .
Wenn wir analysieren möchten, wann und warum dies in Chrome passiert, kann ich Ihnen sagen, was ich festgestellt habe:
- Es passiert nicht zufällig, da boltclock oben geschrieben wurde, aber nur während der Browser andere Übergänge gleichzeitig rendert. Nur nachdem wir das Menü über dem Menü gehalten haben (während diese Animation noch nicht beendet ist) und wir haben eine neue über die Schaltfläche gestartet. Wenn Sie in Ihrem Beispiel die Schaltfläche von unten oder von der Seite aus bewegen, sehen Sie keine Störungen.
- Meine Vermutung ist: Verwendung von
will-changeerzwingt Grafikbeschleunigung und das spart CPU für Fehler. Ein ähnlicher Trick mit-webkit-transform: translateZ(0px)half beim Rendern von Text in Chrome.
Tags und Links css google-chrome css3 hover pseudo-element