56 votes

Problème de rendu Chrome. Ancrage fixe avec UL dans le corps

Il y a un problème de rendu avec Google Chrome et Opera (pourquoi?=) avec ce code:

<html>
<style>
    #content {
        width: 150px;
        background: gray;
    }

    #sidebar {
        position: fixed;
        left: 200px;
        background: gray;
    }
</style>
<body>
    <div id="sidebar">
        <a href="#s1">Link #1</a><br/>
        <a href="#s2">Link #2</a>
    </div>

    <div id="content">
        <div id="s1">
            <a href="#s1">Link #1 TARGET</a>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation
            ullamco laboris nisi ut aliquip ex ea commodo consequat.
            Duis aute irure dolor in reprehenderit in voluptate velit
            esse cillum dolore eu fugiat nulla pariatur.
            Excepteur sint occaecat cupidatat non proident, sunt in culpa
            qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div id="s2">
            <a href="#s2">Link #2 TARGET</a>
            <ul>
                <li>Item 1</li>
                <li>Item 2</li>
            </ul>
        </div>
    </div>

    <a href="#">TOP</a>
</body>
</html>

Comme vous pouvez le voir, je suis en train de faire la barre latérale statique sur le côté droit. Tout fonctionne bien, jusqu'à ce que vous ajoutez quelques <UL> balise dans la page:

http://www.youtube.com/watch?v=zkhH6di2M0c

Le fixe div parfois, commence à disparaître lorsque je clique sur les liens d'ancrage.

Ce qui peut être fait pour éviter un tel comportement?

169voto

Barney Points 6535

Chrome solution:

L'ajout d' -webkit-transform: translateZ(0) de la #sidebar résolu le problème pour moi.

J'ai utilisé translateZ(0) afin de corriger de nombreux Chrome bugs d'affichage au fil des ans. La raison en est que, par l'évocation de transformation 3D, re-peindre est séparée du reste de la CSS de la douleur de la pile (je ne peux pas fournir beaucoup plus de détails que ça, c'est à peu près tout grec pour moi). En tout cas, il semble fonctionner pour moi!

    #sidebar {
        -webkit-transform: translateZ(0);
    }

L'opéra de solution:

Ce n'est pas une solution générique (devra être modifié selon les exigences de positionnement de l'élément en question). Il fonctionne en forçant continue repeint (via CSS, animation) sur une propriété qui pourrait affecter la mise en page (ce qui oblige disposition d'autres facteurs sont calculés et rendu, c'est à dire le maintien de correction du positionnement), mais dans la pratique, ne le font pas. Dans ce cas, j'ai utilisé margin-bottom, car il n'y a aucun moyen que cela va affecter votre mise en page (mais Opera ne sais pas que!):

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

#sidebar {
    animation: noop 1s infinite;
}

Remarque: la solution n'est pas parfaite, que (sur ma machine au moins) le bug des cas de test entraînera une minute de scintillement d'Opéra, perd de positionnement et rapidement redessine. Malheureusement je pense que c'est aussi bon que vous obtiendrez, parce que George dit dans sa réponse, c'est de l'Opéra de comportement naturel entre redessine - en théorie mon code permet de redessiner pour l'élément continu, mais dans la pratique, il y aura infinitésimale lacunes.

EDIT 2 (2013-11-05): depuis, j'ai rencontré des variations de ce bug assez souvent. Bien que l'affiche originale, la réduction des cas de test présente un tout à fait légitime de bug, la plupart des occurrences ont été dans des situations où il existe déjà une transformation 3D d'exploitation sur le corps (ou même en haut de l'arborescence du DOM). Ceci est souvent utilisé comme un hack pour forcer le rendu GPU, mais va en effet conduire à de mauvaises repeindre les questions de ce genre. 2 no-op transformations 3D ne font pas un droit: si vous utilisez un plus haut de l'arbre, essayez de le retirer d'abord avant d'ajouter un autre.

15voto

Corneliu Points 660

La clé pour Chrome est:

  html, body {height:100%;overflow:auto}
 

En ajoutant ceci, le problème de la position fixe devrait être résolu.

0voto

George Katsanos Points 1810

Cela a du sens si vous comprenez comment fonctionne le flux normal du document. Disons que c'est un scénario de bord.

Il n'y a aucune hauteur déclarée dans aucun élément et #sidebar est retiré du flux normal du document par position:fixed .

Si vous ajoutez une propriété height à #sidebar (pixels, pas pourcentages), le problème est résolu.

Je suggérerais d'inclure Normalize.css, je pense que cela va régler le problème.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X