Éléments fixes en disparaissant dans Chrome

Lors de l'implémentation d'une barre de navigation fixe à l'aide de position: fixe, les développeurs peuvent rencontrer un problème où l'élément disparaît sporadiquement en chrome. Ce problème peut se manifester à mesure que l'élément de navigation actif devenant partiellement ou entièrement invisible.

Cause et solution

Ce problème est causé par une bizarrerie dans le moteur de rendu de Chrome, en particulier pour Éléments en haut: 0. Pour résoudre ce problème, ajoutez la règle CSS suivante élément:

-webkit-transform: translateZ(0)

explication

Cette règle force le chrome pour utiliser l'accélération matérielle pour peindre en continu pour peindre en continu l'élément fixe, contournant le problème de rendu. En appliquant une transformation 3D, le processeur graphique du navigateur (GPU) est engagé, garantissant que l'élément reste visible même pendant les transitions de page et les interactions d'élément. Le problème rapporté affecte les éléments avec le haut: 0, mais pas ceux avec un fond: 0. Cela suggère que le problème est lié à la façon dont Chrome gère les éléments près du en haut de la fenêtre.

correction temporaire

en attendant une correction permanente de Chrome, en utilisant le bas: 0 pour l'élément fixe peut fournir une solution de contournement.

Rapport le problème

Pour sensibiliser à ce problème, un bug chromé a été déposé: https://bugs.chromium.org/p/chromium/issues/detail?id=288747. Les utilisateurs peuvent contribuer en mettant en vedette ce bug pour hiérarchiser sa résolution.