Warum verschwinden feste Seitenleisten, wenn ich in Chrome und Opera auf Ankerlinks klicke?

Positionierungsproblem mit Ankern und UL-Listen in Google Chrome und Opera behoben

Dieser Artikel befasst sich mit einem Rendering-Problem, das in den Browsern Google Chrome und Opera beobachtet wurde Dabei kann eine Seitenleiste mit fester Position verschwinden, wenn auf Ankerlinks innerhalb der Seite geklickt wird. Das Vorhandensein von

Elemente auf der Seite verschlimmern dieses Problem.

Chrome-Lösung

Durch Anwenden einer -webkit-transform: TranslateZ(0)-Eigenschaft auf das feste Seitenleistenelement wird dieses Problem in Chrome behoben . Diese Technik nutzt die Trennung von Repaint und CSS-Rendering bei der Durchführung von 3D-Transformationen aus und mildert Anzeigefehler.

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

Nach dem Login kopieren

Opera-Lösung

Um dieses Problem in Opera zu beheben, ist Folgendes erforderlich: anderer Ansatz. Wir verwenden eine @keyframes-Animation, um kontinuierliche Neuzeichnungen einer CSS-Eigenschaft zu erzwingen, die das Layout beeinflusst, aber keine praktischen Auswirkungen auf das Erscheinungsbild der Seite hat. In diesem Fall animieren wir die Eigenschaft „margin-bottom“:

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

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

Nach dem Login kopieren

Es ist wichtig zu beachten, dass diese Lösung nicht fehlerfrei ist. In einigen Fällen kann es zu einem kurzen Flackern kommen, wenn die Seitenleiste ihre Position verliert und schnell neu gezeichnet wird. Verantwortlich für dieses Problem ist das intrinsische Verhalten von Opera zwischen Neuzeichnungen.

Zusätzliche Überlegungen

Bei späteren Begegnungen mit diesem Fehler kam es häufig in Fällen vor, in denen bereits eine 3D-Transformation angewendet wurde der Körper oder ein übergeordnetes Element. Diese Vorgehensweise, die häufig zur Durchsetzung des GPU-Renderings verwendet wird, kann zu dauerhaften Rendering-Problemen führen. Ziehen Sie in Betracht, vorhandene 3D-Transformationen zu entfernen, bevor Sie die oben bereitgestellten Lösungen implementieren.

Google Chrome und Opera verarbeiten jetzt feste Positionierungen mit verbesserter Stabilität. Diese Korrekturen haben sich bei der Lösung der Rendering-Probleme im Zusammenhang mit der Verwendung von UL-Elementen auf der Seite als wirksam erwiesen.

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