CSS: position:fixe à l'intérieur de la position:absolute

Je suis en cours d'exécution dans certains extrêmement comportements étranges, et non cohérent à travers tous les navigateurs que j'ai testé.

J'ai une jolie mise en page complexe, mais le principal problème se trouve ici:

<div id="drop">
  <div id="header"></div>
</div>

#drop a position:absolute et z-index:100

#header a position:fixed; top:60px;

Que je commence à faire défiler vers le bas Chrome ignore la position:fixed règle. Si je supprime soit des deux styles au-dessus de #drop puis Chrome démarre en respectant les position:fixed règle.

ne pouvez pas le faire fonctionner sur Ubuntu Chrome 23.0.1271.97 et de voir le même comportement sur Mac Chrome 25.0.1364.99. Mon ami utilise Ubuntu Chrome 25.0.1364.68 bêta et qu'il fonctionne correctement pour lui. Je l'ai testé sur firefox et ça fonctionne (avec d'autres symptômes)

Quelqu'un a entendu parler de cette erreur? ou peut-on même la reproduire?

modifier

J'utilise openlayers carte comme une autre div avec position:fixed si je supprime le calque, ou au moins de le changer pour display:none puis ce bug bizarre s'en va.

modifier

Remarqué que lors de la présence de ce bug, si je change le niveau de zoom arrière, puis la position ajuste le bon comportement. Pour moi, cela indique une webkit problème qui ne parvient pas à exécuter certains internes de rappel de la fonction de défilement.

Un autre très étrange, c'est que j'ai quelques liens à l'intérieur de #header et de travailler si je viens de cliquer à l'emplacement prévu, même si la div n'y apparaît pas. Ensemble j'ai remarqué que c'est seulement le rendu cassés. Si, à un moment donné du temps, je force le navigateur à nouveau rendu par le redimensionnement de la fenêtre, ou des changements de zoom, ou tout simplement faire Sélectionner Tout, puis la barre d'en-tête sauts à la bonne position, mais ne reste pas fixe.

  • êtes-vous en position de réglage de valeurs pour votre élément fixe? ie top:0;left:0; ?
  • Oui, désolé de ne pas avoir mentionné. J'ai top:60px; sur le fixe. Sera mise à jour de l'OP.
  • Je n'ai pas rencontré ce problème avant, je ne peux pas le reproduire.. jsfiddle.net/be53j
  • Ne pouvait pas reproduire ce soit, sauf sur mon exemple particulier et a remarqué un bug-dépendance. La mise à jour de l'OP maintenant.
  • J'ai rencontré ce bug en deux occasions distinctes. La seule solution que j'ai trouvé était de déplacer le fixed élément en dehors de la absolute élément.
  • qu'est devenue ma conclusion jusqu'à présent. Si jamais je conclure une solution réelle, je vais essayer de 'n n'oubliez pas de le poster ici.
  • J'ai cette folle bug. fou parce qu'il défie les lois de la physique CSS
  • Êtes-vous à l'aide de css transformations dans votre code? Parce que si vous êtes - c'est ce qui cause de la position:fixe pas de travail.
  • openlayers utilisez ceux-ci, ainsi que d'un couple de plugins jquery que j'utilise. Je vais voir si je peux désactiver ceux et mise à jour de l'OP.

InformationsquelleAutor Mikhail | 2013-03-01
  1. 25

    Vous avez mentionné dans les commentaires que OpenLayers utilise CSS transforme. Cela étant le cas:

    l'élément fixe de positionnement deviendra par rapport à l'élément avec la transformation - pas par rapport à la fenêtre d'affichage

    Prendre un coup d'oeil à la spec: Transformer Le Modèle De Rendu

    Spécifiant une valeur autre que "none" pour le "transformer" de la propriété
    établit un nouveau système de coordonnées local à l'élément qu'il est
    appliqués.

    Regardez cette VIOLON dans un navigateur webkit pour le voir en action

    <div class="wpr">
    <div class="fixed"></div>
</div>

.wpr
{
    width: 200px;
    height:1000px;
    background: pink;
    position:relative;
    margin: 0 200px;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}
.fixed
{
    width: 200px;
    height:200px;
    margin: 50px;
    position: fixed;    
    top:0;
    left:0;
    background: aqua;
}
    • Vous venez de m'a sauvé d'une possible pire cauchemar :), je suis en utilisant bootstrap apposer et je suis aussi à l'aide de transformer sur le conteneur parent, je vais me débarrasser de transformer et d'utiliser jquery animate 🙂
    • merci pour cela, je voulais juste ajouter que même will-change:transform déclenche ce comportement (dans le dernier chrome)
    InformationsquelleAutor Danield
  2. 2

    Que l'on a accepté la réponse dit, c'est le comportement voulu, et conformes aux spécifications. Un autre élément important de ce est ce que signifie être à l'aide de CSS transforme.

    Dans votre cas, c'est grâce à OpenLayers, mais cela s'applique à toute personne utilisant will-change: transform ainsi (sans doute beaucoup de personnes le visitant cette question). Cela a été mis en place sur le Chrome bug tracker ici, et marqué comme WontFix, parce que (comme je l'ai dit), c'est un comportement intentionnel. Le commentaire officiel est: est-ce

    Ce comportement est requis par la spécification
    (http://dev.w3.org/csswg/css-will-change/): "Si une non-valeur initiale
    d'une propriété serait la cause de l'élément à générer un bloc contenant
    fixe la position des éléments, précisant que, à la propriété dans la volonté de changement
    doit faire en sorte que l'élément à générer un bloc contenant pour
    fixe la position des éléments."

    L'idée est qu'une fois que sera-changement:transformer est spécifié, vous devez
    être en mesure d'ajouter/supprimer/modifier transforme à moindre coût, sans avoir besoin de
    position fixe descendants de re-layed out.

    Noter que l'utilisation d'autres valeurs de la volonté de changement (par exemple, l'opacité, premier)
    ne pas modifier le positionnement de position fixe descendants.

    Autant que je sache, la seule solution est de faire de la enfant de la will-change élément d'un frère au lieu de cela, pour éviter l'attribut de la cascade.

    Comme une note de côté, dans mon cas précis, j'ai été en mesure de le réparer en étant plus précis avec le will-change attribut. Au lieu de l'utiliser sur le div contenant de la performance-jarring élément nécessaire GPU de déchargement, j'ai utilisé directement sur l'élément concerné. C'était à cause de mon origine un mauvais code, bien que, de sorte qu'il ne fonctionne pas pour la plupart des cas.

    InformationsquelleAutor forresthopkinsa
  3. 1

    Vous devrez placer header à l'extérieur du conteneur parent drop pour le faire fonctionner.

    J'ai eu un peu similaire questions de jours en arrière.Par exemple,si vous définissez le z-index de header,il sera d'atteindre le z-index de la mère dropconteneur.Le z-index de header sera inutile, car elle est déjà à l'intérieur d'un conteneur qui a un autre z-index.

    La même logique de z-index s'applique à la position.

    • Il fait un peu de sens, mais si c'était aussi précis que vous le dites alors OpenLayers ne serait pas avoir d'effet sur cette. Si je supprime OpenLayers (qui sont en dehors de toutes les divs), puis mon header commence à travailler comme prévu.
    InformationsquelleAutor Rahul Shah
  4. 0

    Je veux ajouter une autre solution possible parce que j'ai eu du mal avec chrome ignorant position:fixe pendant un certain temps jusqu'à ce que j'ai enfin trouvé le coupable:

    -webkit-perspective: 1000;

    Il a été à venir à partir d'un plugin que j'utilisais et les causes de TOUTES les positions:fixe les éléments pour être ignoré.
    Espérons que cela aide quelqu'un.

    InformationsquelleAutor parliament
  5. -5

    Tout d'abord, mettre quelque chose dans votre div que les vides se comportent vraiment bizarre. Alors, qu'attendez-vous en mettant un fixed dans un absolute? Évidemment, personne ne sait ce qui est le point de référence de votre fixed div. Devrait-il être ses parents poste? ce qui n'est pas en train de changer avec de défilement ou la position de la page qui change? Essayez d'utiliser des choses qui sont complètement significative et ont une définition claire, parce que si vous le réparer en chrome, ce qui serait le cas avec un autre navigateur? Avez-vous vraiment préfèrent test est sur tous?

    Je suppose qu'un petit changement dans votre divs de sorte que tirer la fixed div de la absolute un ou déplacer le absolute div ailleurs.

    • Dans l'OP, j'ai seulement montré le DOM, pas le contenu. Il existe des sous-balises et le texte dans chacune des divs. fixed n'a pas besoin de point de référence. Toutes les caractéristiques de l'état qu'il est référencé dans la fenêtre du navigateur. La prochaine fois, merci d'utiliser les commentaires au lieu de réponses lors de la demande d'informations supplémentaires.
    InformationsquelleAutor Sheric