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

-Elementen auf der Seite verschärft dieses Problem.

Chrome-Lösung

Anwenden einer -webkit-transform: TranslateZ(0)-Eigenschaft auf die feste Seitenleiste Element behebt dieses Problem in Chrome. Diese Technik nutzt die Trennung von Repaint und CSS-Rendering bei der Durchführung von 3D-Transformationen und mildert so Anzeigefehler.

#sidebar {
    -webkit-transform: translateZ(0);
}

Opera-Lösung

Die Lösung dieses Problems in Opera erfordert einen anderen 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:

@keyframes noop {
  0%   { margin-bottom: 0; }
  100% { margin-bottom: 1em; }
}

#sidebar {
    animation: noop 1s infinite;
}

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

Nachfolgende Begegnungen mit diesem Fehler haben gezeigt, dass er häufig in Fällen auftritt, in denen bereits eine 3D-Transformation angewendet wird 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.