web-dev-qa-db-fra.com

CSS - "position: fixed" agissant comme "absolute" dans Firefox

Je construis un site Web dans Safari, je viens de le tester dans Firefox et mes éléments de navigation fixes se comportent comme si leur position était absolue.

#navigation {
    display: block;
    width: 100%;
    height: 50px;
    position: fixed;
    left: 0px;
    bottom: 0px;
    text-align: center;
    z-index: 99000;
}

C'est le CSS que j'ai pour le wrapper de navigation principal (c'est un nav en bas.). Dans Webkit, cela fonctionne parfaitement: c’est-à-dire qu’il colle quand même au bas de la fenêtre. Dans firefox, il se positionne à la fin des balises. Ainsi, par exemple, sur une longue page, je devrais faire défiler la page uniquement pour la voir. C'est comme si c'était absolu.

J'ai aussi une barre de navigation latérale.

.slidebar {
    display: block;
    position: fixed;
    left: -1px;
    top: -1px;
    width: 1px;
    height: 100%;
    overflow: hidden;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    transition: all 300ms ease;
    z-index: 99998;
}

Cette barre latérale agit également comme si elle était absolue - c’est-à-dire qu’elle se positionnait correctement hors de l’écran, mais elle allongeait <body> et, par conséquent, la barre de défilement horizontale apparaît. Le height: 100%; répond également à la hauteur <body> et non à la hauteur de la fenêtre. Par exemple, mon <header> a une marge supérieure de 20px et la barre de défilement observe également cette marge (le corps a une marge 0). De même, au lieu du height: 100%; se terminant au bas de la fenêtre, il se termine au bas du <body>, en prenant en compte la marge inférieure du pied de page. 

Je ne peux pas comprendre pour la vie de moi pourquoi cela arrive L'inspection des éléments montre que toutes les propriétés se chargent correctement et que cela fonctionne dans Chrome et Safari. Cela a fonctionné initialement, et la dernière fois que j’ai édité la navigation, cela a cessé depuis que j’ai construit d’autres parties non pertinentes du site.

http://www.upprise.com/demo.php - cliquez sur l'icône Enveloppe pour afficher la barre latérale.

cssfirefoxcss-position
16
user2250471

Au cours du processus d’élimination, j’ai pu déterminer que le fait d’avoir ce qui suit dans mon corps était la cause de tous les problèmes avec les divs fixes dans Firefox:

-o-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;

J'avais initialement ajouté ce code pour empêcher le scintillement dans certaines transitions CSS sur le site, mais je suppose que je devrai maintenant l'ajouter à chaque classe.

20
user2250471

J'ai eu exactement le même problème, la propriété CSS suivante d'un élément parent était à l'origine du problème.

transform: translate3d(0px, 0px, 0px);
18
Pankaj

Il semble que certains navigateurs vont appliquer un positionnement fixe par rapport à la fenêtre, alors que Firefox l’applique par rapport au <body />. Vous devez rendre votre body 100% grand:

body {
    height: 100%;
}

Mais la marge de votre .header s’effondre en dehors de l’élément body. Change ça:

margin: 25px auto;

pour ça:

margin: 0 auto; /* updated - thanks JoshC */
padding: 25px auto;
4
Ryan Wheale

J'ai résolu le problème en déplaçant l'élément qui utilise position: fixed; de son élément parent d'origine qui utilise transform: translateX(-50%);.

Ainsi...

<div class="transformed-container">
   <div="fixed-element"></div>
</div>

...est devenu...

<div class="transformed-container"></div>

<div class="fixed-element"></div>

Deux choses m'ont amené à cette conclusion:

  1. La réponse de @ Pankaj montre que la valeur de translation peut causer un problème.
  2. Le commentaire de @ Wildhoney dans une autre réponse fait référence à une explication de la cause sous-jacente: http://meyerweb.com/eric/ Thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/
2
Kevin Weber

Le problème semble être dans votre corps, j'ai ajouté la largeur: 100%; hauteur: 100%; et débordement: caché; dans mon renard de feu et cela avait l'air bien, à l'exception de la barre de menu inférieure qui a la moitié de sa hauteur sur le fond. 

2
Patrick

J'avais besoin de supprimer certaines classes CSS du conteneur supérieur de l'élément fixed-on-scroll qui comportait une transition, de la bibliothèque animateCSS.

$(window).on('scroll', function () {
     if (distance <= 65) {
        $('#my-contaniner').removeClass('animated fadeInLeft'); //delete problematic classes for FF
Add your code
 });

Peut-être que ça aide

1
Beltran

Pas sûr pourquoi les navigateurs rendaient le rendu différemment, bien que la solution soit assez simple. Vous devez attribuer aux éléments parents (html/body) une hauteur de 100% afin de remplir la page entière. Il semble que FF ait rendu les éléments fixes au bas du contenu, par opposition au bas de la fenêtre. En ajoutant ce qui suit, cela fonctionnera sur tous les navigateurs:

html, body {
    height: 100%;
}

En outre, vous devez également utiliser un élément de remplissage sur l'élément .header, par opposition à une marge. Cela résoudra un autre problème.

.header {
    margin: 0 auto;    /* use a value of 0 rather than 25px */
    padding: 25px 0;
}

J'ai testé tout cela dans le navigateur, cela fonctionnera maintenant en FF. Il devrait également rendre correctement dans Chrome et autres.

1
Josh Crozier