Hier sind einige fragenbasierte Titel, die den Kern des Artikels zusammenfassen: Klar und prägnant: * Anker mit fester Position und UL im Gehäuse: Warum bricht er in Chrome und Opera? * Seitenleiste verschwindet

Fester Positionsanker mit UL im Textkörper: Beheben von Rendering-Problemen in Chrome und Opera

Beschreibung des Rendering-Problems

Google Chrome und Opera weisen ein Rendering-Problem auf bei der Implementierung von Code mit einer Seitenleiste mit fester Position und einer ungeordneten Liste (UL) innerhalb des Körpers. Insbesondere verschwindet die Seitenleiste vorübergehend, wenn auf Ankerlinks geklickt wird.

Chrome-Lösung

Um dieses Problem in Chrome zu beheben, wenden Sie die folgende CSS-Eigenschaft auf die Seitenleiste an:

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

Dadurch wird eine 3D-Transformation aufgerufen, die das Neuzeichnen von anderen CSS-Vorgängen trennt und Anzeigefehler behebt.

Opera-Lösung

Für Opera kann die folgende CSS-Animation verwendet werden, um fortlaufende Neuzeichnungen zu erzwingen:

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

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

Diese Lösung zwingt Opera dazu, Layoutfaktoren kontinuierlich zu berechnen und darzustellen und dabei die feste Positionierung der Seitenleiste trotz des Vorhandenseins des UL-Elements beizubehalten.

Hinweis

Die Opera-Lösung kann dazu führen beim Neuzeichnen ein leichtes Flackern. Dies ist jedoch derzeit die optimale Lösung für dieses Problem.

Zusätzliche Überlegungen

Varianten dieses Fehlers können auch auftreten, wenn 3D-Transformationen weiter oben im DOM-Baum vorhanden sind. Entfernen Sie solche Transformationen zuerst, um dieses Problem zu verhindern.

In einigen Fällen kann die Anwendung von „scale3d(1,1,1)“ anstelle von „translateZ(0)“ erforderlich sein, um das Problem in Chrome zu beheben.

Das obige ist der detaillierte Inhalt vonHier sind einige fragenbasierte Titel, die den Kern des Artikels zusammenfassen: Klar und prägnant: * Anker mit fester Position und UL im Gehäuse: Warum bricht er in Chrome und Opera? * Seitenleiste verschwindet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!