position:fixe ne fonctionne pas sous Google Chrome

Je vais avoir quelques problèmes avec un "fixe" de l'élément dans Google Chrome. L'élément se comporte comme il se doit dans d'autres grands navigateurs.

Voici le CSS:

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

La question est, quand le chargement de la page, l'élément est fixé à la partie inférieure de la fenêtre d'affichage, comme il se doit. Sur le défilement, il reste à l'endroit même où il était lorsque la page est chargée - il ne pas rester fixé à la partie inférieure de l'écran.

Il doit y avoir plus à votre problème car il ne peut pas être reproduit avec qui règle CSS sur chrome, ie. jsbin.com/UcIpANol/1 fonctionne très bien sur Chrome.
Vous pouvez peut-être ajouter un JSFiddle

OriginalL'auteur Dln | 2013-12-10

27

essayez d'ajouter le code suivant à votre élément:
```
-webkit-transform: translateZ(0);
```
content d'avoir pu aider. J'ai presque mangé mes yeux de la conception multi-device/navigateur choses... edit: si ça aide, accepter, c'est que la réponse est correcte, il pourrait en aider d'autres et
qui le rend encore pire pour moi: Comparez jsfiddle.net/Supuhstar/t04nh943 jsfiddle.net/Supuhstar/t04nh943/2
également essayer d'enlever relative des éléments. Il pourrait être difficile à remplacer, mais il y a toujours un moyen
Cela fonctionne si bien pour moi l'élément que j'était en train de donner la position fixe n'a, en fait, mais elle est devenue invisible, pour une raison quelconque, quand le défilement et si vous cliquez sur c'est la position qu'il serait parfois devenir visible sur le site et de la place c'est déjà chargé sur, de sorte qu'il fonctionne aussi pour ce genre de question, Merci de vous!
À la recherche de votre réponse, me fait voir mon transform: translate3d(0,0,0); et de le retirer de l'élément parent. Tout était à elle, vient de faire mon enfant de l'élément statique et fixe. - Je Vous Remercie.

OriginalL'auteur scooterlord
8

J'avais une propriété: -webkit-perspective:800; sur la balise body. J'ai enlevé ce et la correction du positionnement commencé à travailler à nouveau... obscure, mais qui mérite un coup d'oeil.

Il fonctionne aussi pour moi si j'ai enlevé le point de vue de la propriété, mais j'en ai besoin pour un effet de parallaxe... ça craint.

OriginalL'auteur Gavin Lovegrove
4

Comme un complément à l'gagné réponse: cela ne fonctionnerait pas si vous avez "-webkit-transform-style: preserve-3d" dans l'un des éléments parents. Je ne sais pas pourquoi, j'ai juste eu et l'a supprimé.

OriginalL'auteur Dima Litvinov
1

J'ai dû désactiver:
```
-webkit-transform: none !important;
transform: none !important;
```
à faire pour moi.

OriginalL'auteur Marcin Rapacz
1

Je devais mettre une position de gauche trop pour que cela apparaisse...et pas seulement un top:
```
{
    left: 0px;
}
```
OriginalL'auteur Robin Morris

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

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

OriginalL'auteur alex351

0

Pour compléter ce que les autres réponses sont en train de dire, sachez également que la définition de la will-change de propriété sur tout élément parent va casser correction du positionnement.

Cela devrait probablement être un commentaire.

OriginalL'auteur RemiV2
0

D'abord de vérifier si des parents ont
```
-webkit-transform: translateZ(...);
```
ou
```
transform: translateZ(...);
```
ou
```
-webkit-transform: translate3d(...)
```
ou
```
transform: translate3d(...)
```
et d'essayer de les retirer.

Si ne fonctionne toujours pas, essayez d'ajouter des
```
-webkit-transform: translateZ(0);
```
ou
```
transform: translateZ(0);
```
à votre élément.

Si ne fonctionne toujours pas, vérifier pour d'autres -webkit-transform /transformer /point de vue des styles sur les parents et les supprimer.

OriginalL'auteur Pavel Maximov

Vous devez vous connecter pour publier un commentaire.