Problème de positionnement résolu avec les ancres et les listes UL dans Google Chrome et Opera

Cet article traite d'un problème de rendu observé dans les navigateurs Google Chrome et Opera où une barre latérale à position fixe peut disparaître lorsque vous cliquez sur des liens d'ancrage dans la page. La présence d'éléments

sur la page exacerbe ce problème.

Solution Chrome

Application d'une propriété -webkit-transform: translateZ(0) à la barre latérale fixe L'élément résout ce problème dans Chrome. Cette technique exploite la séparation du repaint et du rendu CSS lors de l'engagement de transformations 3D, atténuant ainsi les problèmes d'affichage.

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

Solution Opera

Résoudre ce problème dans Opera nécessite une approche différente. Nous utilisons une animation @keyframes pour forcer des repeints continus sur une propriété CSS qui influence la mise en page mais n'a aucun impact pratique sur l'apparence de la page. Dans ce cas, nous animons la propriété margin-bottom :

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

#sidebar {
    animation: noop 1s infinite;
}

Il est important de noter que cette solution n'est pas parfaite. Dans certains cas, un bref scintillement peut se produire lorsque la barre latérale perd son positionnement et se redessine rapidement. Le comportement intrinsèque d'Opera entre les redessins est responsable de ce problème.

Considérations supplémentaires

Les rencontres ultérieures avec ce bug ont démontré des occurrences fréquentes dans les cas où une transformation 3D est déjà appliquée à le corps ou un élément parent. Cette pratique, souvent utilisée pour appliquer le rendu GPU, peut entraîner des problèmes de rendu persistants. Envisagez de supprimer les transformations 3D existantes avant de mettre en œuvre les solutions fournies ci-dessus.

Google Chrome et Opera gèrent désormais le positionnement fixe avec une stabilité améliorée. Ces correctifs ont démontré leur efficacité dans la résolution des problèmes de rendu associés à l'utilisation des éléments UL sur la page.