Warum verschwindet mein Anker mit fester Position in Chrome und Opera, wenn ich auf UL-Links klicke?

Rendering-Problem bei Chrome und Opera: Fixierter Positionsanker mit UL im Textkörper

In bestimmten Browsern wie Chrome und Opera kann beim Versuch der Positionierung ein besonderes Rendering-Problem auftreten ein festes Element neben einem UL-Tag. Dieses Problem äußert sich dadurch, dass das feste Element beim Klicken auf Ankerlinks vorübergehend verschwindet.

Ursache

Die zugrunde liegende Ursache dieses Problems ist auf die Art und Weise zurückzuführen, wie diese Browser Repaints verarbeiten, wenn Elemente auf der Seite aktualisiert werden . Insbesondere kann das feste Element während des Neulackierungsprozesses vorübergehend seine Positionierung verlieren.

Chrome-Lösung

Um dieses Problem in Chrome zu beheben, können Sie eine TranslateZ(0)-Transformation auf das problematische feste Element anwenden . Diese Aktion löst effektiv eine 3D-Transformation aus, isoliert den Repaint-Prozess vom Rest des CSS-Stacks und entschärft so das Positionierungsproblem.

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

Opera-Lösung

Für Opera ein etwas anderer Ansatz ist erforderlich. In diesem Fall können Sie eine CSS-Animation erstellen, die eine Eigenschaft kontinuierlich neu zeichnet, die sich auf das Layout, aber nicht auf das visuelle Erscheinungsbild des Elements auswirkt, z. B. margin-bottom. Dieser Ansatz verleitet Opera dazu, kontinuierliche Neulackierungen durchzuführen und sicherzustellen, dass das feste Element seine Positionierung beibehält.

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

#sidebar {
    animation: noop 1s infinite;
}

Hinweis

Es ist wichtig zu beachten, dass diese Lösung möglicherweise nicht narrensicher ist und zu einer leichten Verletzung führen kann flackern, während Opera versucht, die feste Positionierung wiederherzustellen. Diese Einschränkung liegt in der Art und Weise, wie Opera mit Neuzeichnungsprozessen umgeht, und macht es schwierig, das visuelle Artefakt vollständig zu beseitigen.

Das obige ist der detaillierte Inhalt vonWarum verschwindet mein Anker mit fester Position in Chrome und Opera, wenn ich auf UL-Links klicke?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!