web-dev-qa-db-fra.com

position: fixe ne fonctionne pas dans Google Chrome

J'ai des problèmes avec un élément "fixe" dans Google Chrome. L'élément se comporte comme il se doit dans les autres principaux navigateurs.

Voici le CSS:

#element { 
    position: fixed; 
    bottom: 0px; 
    width: 100%; 
    height: 50px; 
    z-index: 10;
}

Le problème est que, lorsque la page est chargée, l'élément est fixé au bas de la fenêtre, comme il se doit. Lors du défilement, il reste au même endroit que lors du chargement de la page - il ne reste pas fixé au bas de l'écran.

cssgoogle-chromecss-position
14
Dln

essayez d'ajouter le code suivant à votre élément:

-webkit-transform: translateZ(0);
27
scooterlord

J'avais une propriété: -webkit-perspective:800; sur la balise body. J'ai enlevé ceci et le positionnement fixe a recommencé à fonctionner ... obscur, mais mérite un coup d'oeil.

8
Gavin Lovegrove

En complément de la réponse obtenue: cela ne fonctionnerait pas si vous avez "-webkit-transform-style: preserve-3d" dans l'un des éléments parents. Je ne sais pas pourquoi, je l'ai juste eu et l'ai enlevé.

4
Dima Litvinov

Je devais aussi mettre une position à gauche pour que cela apparaisse ... pas seulement un sommet:

{
    left: 0px;
}
1
Robin Morris

Aucune de ces réponses n'a fonctionné pour moi. Ce qui a bien fonctionné pour moi est de définir la propriété contient de l'élément parent sur none  

{
  contain:none !important;
}

1
tariksoypt

Je devais désactiver:

-webkit-transform: none !important;
transform: none !important;

pour le faire pour moi.

1
Marcin Rapacz

J'ai utilisé position: sticky; bottom: 0; pour l'instant.

#element { 
   position: sticky; <--- 
   bottom: 0px; 
   width: 100%; 
   height: 50px; 
   z-index: 10;
}
1
alex351

Commencez par vérifier si un parent a

-webkit-transform: translateZ(...);

ou 

transform: translateZ(...);

ou 

-webkit-transform: translate3d(...)

ou 

transform: translate3d(...)

et essayez de les enlever.

Si cela ne fonctionne toujours pas, essayez d'ajouter

-webkit-transform: translateZ(0);

ou 

transform: translateZ(0);

à votre élément.

Si cela ne fonctionne toujours pas, recherchez d'autres styles -webkit-transformation/transformation/perspective sur les parents et supprimez-les.

0
Pavel Maximov

Pour compléter ce que disent les autres réponses, sachez également que la définition de la propriété will-change sur tout élément parent rompra le positionnement fixe.

0
remi2j

Je l'ai corrigé en enlevant

filter: blur(0);

dans l’élément parent. Ce problème ne concernait que le chrome, il fonctionnait bien avec Safari.

0
zookd