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-tutoriel CSS-php.cn

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

Mary-Kate Olsen

Libérer： 2024-10-26 06:12:02

original

199 Les gens l'ont consulté

Here are a few question-based titles that capture the essence of the article:

Clear and Concise:

* Fixed Position Anchor with UL in Body: Why Does It Break in Chrome and Opera?
* Sidebar Disappears After Anchor Click: Troubleshooting for Chrome and Oper

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>

Copier après la connexion

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>

Copier après la connexion

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!