Pourquoi ma barre latérale fixe disparaît-elle lorsque je clique sur des liens d'ancrage dans Chrome et Opera ?

Problème de rendu Chrome et Opera : l'élément positionné fixe disparaît avec un clic d'ancrage

Le code HTML fourni tente de créer une barre latérale fixe sur la droite -côté du document. Cependant, lorsqu'un <UL> est ajouté à la page, la barre latérale fixe peut parfois disparaître lorsqu'un lien d'ancrage est cliqué.

Solution Chrome :

Pour résoudre le problème dans Chrome, ajoutez le style suivant à l'élément fixe :

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

Dans certaines circonstances, Google Chrome nécessite l'inclusion d'une transformation 3D pour séparer la repeinture des autres processus CSS, résolvant ainsi efficacement les problèmes d'affichage.

Solution Opera :

Résoudre le problème dans Opera est un peu plus complexe. Voici une solution qui force les repeintures continues :

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

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

Cette animation amènera Opera à recalculer et à restituer constamment les facteurs de mise en page, garantissant que le positionnement fixe reste stable.

Remarque :

Bien que cette solution résolve efficacement le bug dans la plupart des cas, il peut y avoir un scintillement mineur occasionnel lorsque Opera tente de rétablir le positionnement fixe.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!