Voici quelques titres basés sur des questions qui capturent l'essence de l'article : Clair et concis : * Ancrage à position fixe avec UL dans le corps : pourquoi se brise-t-il dans Chrome et Opera ? * La barre latérale disparaît

Ancre à position fixe avec UL dans le corps : résolution des problèmes de rendu dans Chrome et Opera

Description du problème de rendu

Google Chrome et Opera présentent un problème de rendu lors de l'implémentation de code avec une barre latérale à position fixe et une liste non ordonnée (UL) dans le corps. Plus précisément, la barre latérale disparaît momentanément lorsque vous cliquez sur les liens d'ancrage.

Solution Chrome

Pour résoudre ce problème dans Chrome, appliquez la propriété CSS suivante à la barre latérale :

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

Cela invoque une transformation 3D, séparant la repeinture des autres opérations CSS et résolvant les bugs d'affichage.

Solution Opera

Pour Opera, l'animation CSS suivante peut être utilisée pour forcer les repeintures continues :

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

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

Cette solution oblige Opera à calculer et à restituer en permanence les facteurs de mise en page, en conservant le positionnement fixe de la barre latérale malgré la présence de l'élément UL.

Remarque

La solution Opera peut entraîner un léger scintillement lors du redessinage. Cependant, il s'agit actuellement de la solution optimale à ce problème.

Considérations supplémentaires

Des variantes de ce bug peuvent également se produire lorsqu'il y a des transformations 3D plus haut dans l'arborescence DOM. Supprimez d'abord ces transformations pour éviter ce problème.

Dans certains cas, l'application de scale3d(1,1,1) au lieu de translateZ(0) peut être nécessaire pour résoudre le problème dans Chrome.

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!