Pourquoi ma barre de navigation fixe disparaît-elle dans Chrome ?

Des éléments fixes disparaissent dans Chrome

Lors de la mise en œuvre d'une barre de navigation fixe à l'aide de position:fixed, les développeurs peuvent rencontrer un problème où l'élément disparaît sporadiquement dans Chrome. Ce problème peut se manifester lorsque l'élément de navigation actif devient partiellement ou entièrement invisible.

Cause et solution

Ce problème est dû à une bizarrerie dans le moteur de rendu de Chrome, en particulier pour éléments avec top : 0. Pour résoudre ce problème, ajoutez la règle CSS suivante à l'élément fixe :

<code class="css">-webkit-transform: translateZ(0)</code>

Explication

Cette règle oblige Chrome à utiliser l'accélération matérielle pour peindre en continu l'élément fixe, en contournant le problème de rendu. En appliquant une transformation 3D, le processeur graphique (GPU) du navigateur est engagé, garantissant que l'élément reste visible même pendant les transitions de page et les interactions entre éléments.

Informations supplémentaires

Le problème signalé affecte les éléments avec top : 0, mais pas ceux avec bottom : 0. Cela suggère que le problème est lié à la façon dont Chrome gère les éléments situés en haut de la fenêtre.

Correction temporaire

En attendant un correctif permanent de Chrome, l'utilisation de bottom:0 pour l'élément fixe peut fournir une solution de contournement.

Signaler le problème

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

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!