Warum verursacht mein CSS-Übergang ein Flackern beim Laden der Seite in Chrome?

Beseitigen Sie das Flackern von CSS-Übergängen beim Laden der Seite

Problem:

CSS-Übergänge rufen ein unerwünschtes Ergebnis hervor Blinkeffekt beim Laden der Seite, Übergang von Elementen von Schwarz zu der ihnen zugewiesenen Farbe.

Ursache:

Ein Fehler in Chrome initiiert CSS-Übergänge, wenn die Webseite ein Element.

Lösung:

Um das Flackerproblem zu beheben:

1. Fügen Sie ein leeres <script>-Element hinzu. Tag:</script>

   Einen <script> Tag mit einem einzelnen Leerzeichen in der Seitenfußzeile:</script>

   <code class="html"><script> </script></code>

2. SASS oder Less verwenden:

   Integration von Präprozessoren wie SASS oder Less zum Umschließen die Übergangsdeklaration in einer Funktion:

   <code class="sass">.class {
     @transition(color .2s);
   
     color: #000;
   
     &:hover {
       color: #FFFF00;
     }
   }</code>

Zusätzliche Hinweise:

• Verfolgen Sie den Fehlerfortschritt unter https://crbug .com/332189 und https://crbug.com/167083.
• Die vorgestellten Lösungen richten sich speziell an den Chrome-Browser.

Das obige ist der detaillierte Inhalt vonWarum verursacht mein CSS-Übergang ein Flackern beim Laden der Seite in Chrome?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!