web-dev-qa-db-fra.com

Position fixe sur le mobile chromé faisant bouger l'élément sur le défilement vers le haut/bas

Je suis confronté à ce problème étrange qui ressemble à un bogue sur Chrome mobile.

J'ai un div avec la position: fixe; aligné sur le coin supérieur droit de l'écran. Sur le bureau, cela fonctionne bien (il reste en place), sur mobile, cependant, la div se déplace lorsque je fais défiler vers le haut ou le bas. J'ai fait une vidéo pour mieux l'expliquer:

https://www.youtube.com/watch?v=gCgN6ULkcMg

 scroll up

_ {Fonctionne avec le défilement vers le haut} _

 scroll down

_ {défiler vers le bas, une partie du div avec position: fixed disparaît en dehors de la fenêtre}

J'ai essayé d'isoler le problème sur un violon, mais je ne pouvais pas le reproduire. J'ai donc encapsulé tout le site dans un violon et le problème a cessé. Je n'ai toujours pas compris pourquoi.

Site isolé dans un violon: Supprimé *

Site Web en direct: Supprimé *

De plus, j'ai effectué des tests sur différents appareils, sur le site Web en direct:

  • Chrome mobile: Bugs
  • Bureau Chrome: Fonctionne bien
  • Firefox mobile: Fonctionne bien
  • Safari mobile: Fonctionne bien

Quelqu'un peut-il m'expliquer pourquoi Chrome Mobile a ce problème, alors que les autres n'en ont pas?

Ma position: div fixe ressemble à ceci:

div {
  position:fixed;
  top:10px;
  left:0;
  width:100%;
  text-align:right;
}

* Suppression des liens, car il s'agit du site Web d'un client. La solution est dans la réponse ci-dessous.

htmlgoogle-chromemobilescrollcss-position
17
Lucas Bustamante

J'ai découvert.

Pour une bonne raison, mon bien-aimé Google Chrome sur mobile nécessite minimum-scale = 1 sur la méta de la fenêtre d'affichage.

<meta name="viewport" content="minimum-scale=1">

Ça fonctionne maintenant.

50
Lucas Bustamante

Le problème est avec meta tag vous devez y mettre 

<meta name="viewport" content="height=device-height, 
                      width=device-width, initial-scale=1.0, 
                      minimum-scale=1.0, maximum-scale=1.0, 
                      user-scalable=no, target-densitydpi=device-dpi">

En effet, Chrome modification du navigateur height de viewport 

5
vAhy_The

Si vous voulez que l’élément commence et reste en haut de la page, essayez d’utiliser 

    #header {
          position: sticky;
          top: 0;
    }

Cela fonctionnait pour moi, du moins dans une version antérieure de Chrome Desktop, lorsque la correction ne se comportait pas correctement. Sachez simplement que les éléments positionnés relatifs n'ignoreront pas les éléments positionnés collants comme ils sont fixes.

Je ne sais pas si cela aidera, mais c'est la réponse que je cherchais lorsque je suis arrivé à cette question.

2
Travis Fleenor

Il est bon de vérifier s'il y a quelque chose qui dépasse dans votre fenêtre. Il peut ne pas être nécessaire d'ajuster la balise méta de la fenêtre.

Si le problème persiste encore ou si vous souhaitez donner un peu plus de temps au navigateur, pensez à ajouter

transform: translate3d(0, 0, 0);

Cela vous aidera, mon ami: D Lorsque vous utilisez également z-index, assurez-vous qu'il est toujours appliqué, en supposant que z-index n'est pas appliqué non collant.

0
rémy