Pourquoi les divs à position fixe avec les balises UL disparaissent-ils dans Chrome et Opera ?

Problème de rendu Chrome et Opera avec position fixe et balise UL

Certaines configurations dans le code HTML peuvent provoquer des problèmes de rendu dans Google Chrome et Opera. Lorsqu'un div à position fixe comprend un < UL> balise, le div peut disparaître par intermittence en cliquant sur les liens d'ancrage. Ce problème est dû à un problème interne au sein du moteur de rendu de Chrome.

Solution Chrome

Dans Chrome, le problème peut être résolu en ajoutant -webkit-transform: translateZ( 0) au style CSS pour le div à position fixe :

#sidebar {
  -webkit-transform: translateZ(0); /* Fix for Chrome rendering issue */
}

Cette technique oblige Chrome à effectuer une transformation 3D sur le div, ce qui semble résoudre le problème de rendu sous-jacent.

Solution Opera

La gestion du problème par Opera diffère de celle de Chrome. Pour résoudre le problème dans Opera, il faut continuellement forcer les repeints sur une propriété, ce qui peut potentiellement affecter la mise en page, mais n'a en pratique aucun impact. Dans ce cas, margin-bottom est utilisé car il est peu probable qu'il interfère avec la mise en page :

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

#sidebar {
  animation: noop 1s infinite;
}

Ce code garantit qu'Opera repeint en permanence la marge inférieure de la barre latérale, la forçant à maintenir sa position fixe. Bien que cette solution ne soit pas entièrement parfaite, elle minimise le scintillement et rétablit le comportement souhaité.

Il est important de noter que la solution Opera n'est pas une solution universelle et peut nécessiter des ajustements en fonction des exigences de positionnement spécifiques du élément en question. Si vous rencontrez ce problème, essayez de modifier le CSS suggéré en fonction de vos besoins.

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!