Warum verschwindet meine feste Seitenleiste, wenn ich in Chrome und Opera auf Ankerlinks klicke?

Chrome- und Opera-Rendering-Problem: Fest positioniertes Element verschwindet beim Klicken auf den Anker

Der bereitgestellte HTML-Code versucht, rechts eine feste Seitenleiste zu erstellen -Handseite des Dokuments. Wenn jedoch ein

Element zur Seite hinzugefügt wird, kann die feste Seitenleiste gelegentlich verschwinden, wenn auf einen Ankerlink geklickt wird.

Chrome-Lösung:

Um das Problem in Chrome zu beheben, fügen Sie das hinzu Folgender Stil für das feste Element:

<code class="css">#sidebar {
  -webkit-transform: translateZ(0);
}</code>

Unter bestimmten Umständen erfordert Google Chrome die Einbindung einer 3D-Transformation, um das Neuzeichnen von anderen CSS-Prozessen zu trennen und so die Anzeigeprobleme effektiv zu lösen.

Opera-Lösung:

Die Behebung des Problems in Opera ist etwas komplexer. Hier ist eine Lösung, die kontinuierliche Neulackierungen erzwingt:

<code class="css">@keyframes noop {
  0%   { margin-bottom: 0; }
  100% { margin-bottom: 1em; }
}

#sidebar {
    animation: noop 1s infinite;
}</code>

Diese Animation führt dazu, dass Opera die Layoutfaktoren ständig neu berechnet und rendert, um sicherzustellen, dass die feste Positionierung stabil bleibt.

Hinweis:

Während diese Lösung den Fehler in den meisten Fällen effektiv behebt, kann es gelegentlich zu geringfügigem Flackern kommen, wenn Opera versucht, die feste Positionierung wiederherzustellen.

Das obige ist der detaillierte Inhalt vonWarum verschwindet meine feste Seitenleiste, wenn ich in Chrome und Opera auf Ankerlinks klicke?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!