section - html5 code

La posición fija en el elemento móvil de cromo hace que el elemento se mueva hacia arriba o hacia abajo

Question

Me enfrento a este extraño problema que parece un error en Chrome Mobile.

Tengo un div con posición: fijo; alineado a la esquina superior derecha de la pantalla. En el escritorio, funciona bien (permanece en su lugar), en el móvil, sin embargo, el div se mueve cuando me desplazo hacia arriba o hacia abajo. Hice un video para explicarlo mejor:

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

En scroll up funciona bien.

en el desplazamiento hacia abajo, una parte del div con posición: fija desaparece fuera de la ventana gráfica

Traté de aislar el problema en un violín, pero no pude reproducirlo. Así que encapsulé todo el sitio web en un violín, y el problema dejó de ocurrir. Todavía no entendía por qué.

Sitio web aislado en un violín: Eliminado *

Sitio web en vivo: Eliminado *

Además, realicé algunas pruebas en diferentes dispositivos, en el sitio web en vivo:

• Chrome mobile: Bugs
• Escritorio de Chrome: funciona bien
• Firefox mobile: funciona bien
• Safari móvil: funciona bien

¿Puede alguien explicarme por qué Chrome Mobile tiene este problema, mientras que los otros no?

Mi posición: div fija se ve algo como esto:

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

* Se eliminaron los enlaces porque es el sitio web de un cliente. La solución está en la respuesta a continuación.

Answer 1

Descubrí.

Por alguna razón abandonada, mi querido Google Chrome en dispositivos móviles requiere una escala mínima = 1 en la ventana gráfica meta.

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

Ahora funciona.

Answer 2

Algunos de sus elementos salen de la ventana gráfica, por lo que Android Chrome escala automáticamente la ventana gráfica. Disminuye los elementos que son más grandes como el viewport.

Answer 3

El problema es con la meta tag que debes poner ahí.

<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">

Esto se debe a que el navegador Chrome cambia la height de la viewport .

Answer 4

Es bueno comprobar si hay algo que cuelga en su ventana gráfica, ya que no es necesario ajustar la metaetiqueta de la ventana gráfica.

Si esa cosa pegajosa todavía se tambalea, o simplemente para darle al navegador un poco más de tiempo para respirar, considere agregar

transform: translate3d(0, 0, 0);

Esto te ayudará, amigo: D Al usar también el índice z, asegúrate de que siempre se aplique, asumiendo que el índice z no se aplica de forma no pegajosa.

Answer 5

Si desea que el elemento comience y permanezca en la parte superior de la página, intente usar

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

Eso solo me funcionó, al menos en una versión anterior del escritorio de Chrome, cuando Arreglado no se estaba comportando adecuadamente. Solo tenga en cuenta que los elementos posicionados relativos no ignorarán los elementos posicionados pegajosos como lo hacen fijos.

No estoy seguro de si esto ayudará, pero es la respuesta que estaba buscando cuando llegué a esta pregunta.