posición: arreglado no funciona en iPad y iPhone
He estado luchando con el posicionamiento fijo en el iPad por un tiempo. Conozco iScroll y no siempre parece funcionar (incluso en su demostración). También sé que Sencha tiene una solución para eso, pero no pude Ctrlobtener Fel código fuente de esa solución.
Espero que alguien pueda tener la solución. El problema es que los elementos en posición fija no se actualizan cuando el usuario se desplaza hacia abajo o hacia arriba en un Safari móvil con iOS.
Muchos navegadores móviles no lo admiten deliberadamente position:fixed;porque los elementos fijos podrían interferir en una pantalla pequeña.
El sitio Quirksmode.org tiene una muy buena publicación de blog que explica el problema: http://www.quirksmode.org/blog/archives/2010/12/the_fifth_posit.html
Consulte también esta página para obtener una tabla de compatibilidad que muestra qué navegadores móviles admiten position:fixed;: http://www.quirksmode.org/m/css.html
(pero tenga en cuenta que el mundo de los navegadores móviles se está moviendo muy rápidamente, por lo que es posible que tablas como esta no permanezcan actualizadas por mucho tiempo).
Actualización: Se informa que iOS 5 y Android 4 tienen posición: soporte fijo ahora.
Yo mismo probé iOS 5 en una tienda Apple hoy y puedo confirmar que funciona con la posición fija. Sin embargo, existen problemas al acercar y desplazarse alrededor de un elemento fijo.
Encontré esta tabla de compatibilidad mucho más actualizada y útil que la del modo peculiar: http://caniuse.com/#search=fixed
Tiene información actualizada sobre Android, Opera (mini y móvil) e iOS.
El posicionamiento fijo no funciona en iOS como lo hace en las computadoras.
Imagina que tienes una hoja de papel (la página web) debajo de una lupa (la ventana gráfica), si mueves la lupa y el ojo, verás una parte diferente de la página. Así es como funciona iOS.
Ahora hay una lámina de plástico transparente con una palabra escrita, esta lámina de plástico permanece estacionaria pase lo que pase (la posición: elementos fijos). Entonces, cuando mueves la lupa, el elemento fijo parece moverse.
Alternativamente, en lugar de mover la lupa, mueves el papel (la página web), manteniendo quietas la hoja de plástico y la lupa. En este caso, la palabra en la hoja de plástico parecerá permanecer fija y el resto del contenido parecerá moverse (porque en realidad lo es). Este es un navegador de escritorio tradicional.
Entonces, en iOS la ventana gráfica se mueve, en un navegador tradicional la página web se mueve. En ambos casos los elementos fijos permanecen inmóviles en la realidad; aunque en iOS los elementos fijos parecen moverse.
La forma de solucionar esto es seguir los últimos párrafos de este artículo.
(básicamente, deshabilite el desplazamiento por completo, tenga el contenido en un div desplazable separado (consulte el cuadro azul en la parte superior del artículo vinculado) y el elemento fijo en una posición absoluta)
"posición: fija" ahora funciona como era de esperar en iOS5.
posición: fija funciona en Android/iPhone para desplazamiento vertical. Pero debes asegurarte de que tus metaetiquetas estén completamente configuradas. p.ej
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
Además, si planea que la misma página funcione en Android anterior a 4.0, también debe establecer la posición superior, o se agregará un pequeño margen por algún motivo.
Tuve este problema en Safari (iOS 10.3.3): el navegador no se volvió a dibujar hasta que se activó el evento táctil. Los elementos fijos no aparecían o estaban cortados.
El truco para mí fue agregar transform: Translate3d(0,0,0); a mi elemento de posición fija.
.fixed-position-on-mobile {
position: fixed;
transform: translate3d(0,0,0);
}
EDITAR : ahora sé por qué la transformación soluciona el problema: aceleración de hardware. Agregar la transformación 3D activa la aceleración de la GPU, lo que permite una transición suave. Para obtener más información sobre la aceleración de hardware, consulte este artículo: http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css .
