posición: fijo no funciona en iPad y iPhone

Question

He estado luchando con el posicionamiento fijo en el iPad por un tiempo. Sé iScroll y no siempre parece funcionar (incluso en su demo). También sé que Sencha tiene una solución para eso, pero no pude Ctrl + F el código fuente para esa solución.

Espero que alguien tenga la solución. El problema es que los elementos de posición fija no se actualizan cuando el usuario sube/baja en un Safari móvil con iOS.

Answer 1

Terminé usando la nueva versión 1.1 de jQuery Mobile: http://jquerymobile.com/blog/2012/04/13/announcing-jquery-mobile-1-1-0/

Ahora tenemos una sólida re-escritura que proporciona verdaderas barras de herramientas fijas en el una gran cantidad de plataformas populares y segura cae de nuevo a la electricidad estática barra de herramientas posicionamiento en otros navegadores.

La parte más fresca de este enfoque es que, a diferencia basados ​​en JS soluciones que imponen la física de desplazamiento no naturales en todas las plataformas , nuestro desplazamiento se siente 100% nativa porque es . Esto significa que el desplazamiento se siente en todas partes y funciona con el tacto, la rueda del mouse y la entrada del usuario del teclado. Como beneficio adicional, nuestra solución basada en CSS es súper liviana y no afecta la compatibilidad o la accesibilidad.

Answer 2

Muchos navegadores móviles deliberadamente no admiten position:fixed; con el argumento de que los elementos fijos podrían interferir en una pantalla pequeña.

El sitio de Quirksmode.org tiene una muy buena entrada de blog que explica el problema: http://www.quirksmode.org/blog/archives/2010/12/the_fifth_posit.html

Véase también esta página para una demostración gráfica de compatibilidad que los navegadores móviles soportan position:fixed;: http://www.quirksmode.org/m/css.html

(pero tenga en cuenta que la el mundo de los navegadores móviles se está moviendo muy rápido, por lo que las tablas como esta pueden no estar actualizadas por mucho tiempo)

Actualización: Se informa que iOS 5 y Android 4 tienen una posición: soporte fijo ahora.

He probado iOS 5 en una tienda Apple hoy y puedo confirmar que funciona con la posición fija. Sin embargo, hay problemas con el acercamiento y el barrido alrededor de un elemento fijo.

Me encontraron esta tabla de compatibilidad mucho más actualizada y útil que el quirksmode uno: http://caniuse.com/#search=fixed

Tiene hasta la fecha información en Android, Opera (mini y móvil) & IOS.

Answer 3

El posicionamiento fijo no funciona en iOS como lo hace en las computadoras.

Imagine que tiene una hoja de papel (la página web) debajo de una lupa (la ventana gráfica), si mueve la lupa y su ojo, verá una parte diferente de la página. Así es como funciona iOS.

Ahora hay una hoja de plástico transparente con una palabra en él, esta hoja de plástico permanece estacionaria sin importar qué (la posición: elementos fijos). Entonces, cuando mueve la lupa, el elemento fijo aparece para moverse.

Como alternativa, en lugar de mover la lupa, mueve el papel (la página web), manteniendo la hoja de plástico y la lupa todavía. En este caso, la palabra en la hoja de plástico parecerá estar fija, y el resto del contenido parecerá moverse (porque en realidad lo es). Este es un navegador de escritorio tradicional.

Así que en iOS se mueve la ventana gráfica, en un navegador tradicional se mueve la página web. En ambos casos, los elementos fijos permanecen quietos en la realidad; aunque en iOS los elementos fijos parecen moverse.

---

La forma de evitar esto, es seguir los últimos párrafos de this article

(básicamente desactivar el desplazamiento en conjunto, tienen el contenido en un div desplazable separado (véase el recuadro azul en la parte superior de el artículo enlazado), y el elemento fijo posición absoluta) "position: fixed"

---

ahora funciona como era de esperar en iOS5.

Answer 4

posición: fijo funciona en android/iphone para desplazamiento vertical. Pero debe asegurarse de que sus metaetiquetas estén completamente configuradas. por ejemplo

<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 usted está planeando tener el mismo trabajo página en Android 4.0 pre, es necesario establecer la posición superior también, o se añadirá un pequeño margen por alguna razón.

Answer 5

aquí es mi solución a este ...

CSS

#bgimg_top { 
    background: url(images/bg.jpg) no-repeat 50% 0%; 
    position: fixed; 
    top:0; 
    left: 0; 
    right:0 ; 
    bottom:0; 
} 

HTML

<body> 
<div id="bgimg_top"></div> 
.... 
</body> 

La explicación es que la posición fijada para la div mantendrá el div de el fondo en todo momento, luego estiramos el div para ir a todos los rincones del navegador (siempre que margen del cuerpo = 0) usando el (izquierda, derecha, arriba, abajo) simultáneamente.

Por favor, asegúrese de no utilizar el ancho y la altura ya que esto anulará las opciones superior, izquierda, derecha e inferior.

Answer 6

ahora el apoyo de manzana que

overflow:hidden; 
-webkit-overflow-scrolling:touch; 

Answer 7

usando jQuery soy capaz de llegar a esto. no se desplaza suavemente, pero cumple su cometido. puede desplazarse hacia abajo, y el div fijo aparece en la parte superior.

EL CSS

<style type="text/css"> 
    .btn_cardDetailsPg {height:5px !important;margin-top:-20px;} 
    html, body {overflow-x:hidden;overflow-y:auto;} 
    #lockDiv { 
    background-color: #fff; 
    color: #000; 
    float:left; 
    -moz-box-shadow: 0px 4px 2px 2px #ccc;-webkit-box-shadow: 0px 4px 2px 2px #ccc;box-shadow:0px 4px 2px 2px #ccc; 
    } 
#lockDiv.stick { 
    position: fixed; 
    top: 0; 
    z-index: 10000; 
    margin-left:0px; 
    } 
</style> 

el código HTML

<div id="lockSticky"></div> 
<div id="lockDiv">fooo</div> 

jQuery

<script type="text/javascript"> 
    function sticky_relocate() { 
     var window_top = $(window).scrollTop(); 
     var div_top = $('#lockSticky').offset().top; 
     if (window_top > div_top) 
      $('#lockDiv').addClass('stick') 
     else 
      $('#lockDiv').removeClass('stick'); 
    } 
    $(function() { 
     $(window).scroll(sticky_relocate); 
     sticky_relocate(); 
    }); 
</script> 

Finalmente queremos determinar si el iPod Touch en modo horizontal o vertical para que aparezca en consecuencia

<script type="text/javascript"> 
    if (navigator.userAgent.match(/like Mac OS X/i)) { 
     window.onscroll = function() { 

     if (window.innerWidth > window.innerHeight) { 
      //alert("landscape [ ]"); 
      document.getElementById('lockDiv').style.top = 
      (window.pageYOffset + window.innerHeight - 268) + 'px'; 
     } 

     if (window.innerHeight > window.innerWidth) { 
      //alert("portrait ||"); 
      document.getElementById('lockDiv').style.top = 
      (window.pageYOffset + window.innerHeight - 418) + 'px'; 
     } 
     }; 
    } 
</script> 

Answer 8

A pesar de que el atributo CSS {position:fixed;} parece (en su mayoría) que trabajan en los dispositivos IOS más nuevos, es posible tener la peculiaridad del dispositivo y vuelve a los {position:relative;} en alguna ocasión y sin causa o motivo. Por lo general, borrar el caché ayudará, hasta que algo suceda y el capricho vuelva a suceder.

En concreto, desde la propia Apple Preparing Your Web Content for iPad:

Safari en el iPad y Safari en el iPhone no tienen ventanas de tamaño variable. En Safari en iPhone y iPad, el tamaño de la ventana se establece en el tamaño de la pantalla (menos los controles de la interfaz de usuario de Safari), y el usuario no puede cambiar . Para moverse por una página web, el usuario cambia el nivel de zoom y la posición de la ventana gráfica al hacer doble clic o pellizcar para acercar o , o tocando y arrastrando para desplazarse por la página. Cuando un usuario cambia el nivel de zoom y la posición de la ventana gráfica lo hace dentro de un área de contenido visible de tamaño fijo (es decir, la ventana). Esto significa que los elementos de la página web que tienen su posición "fija" en la ventana gráfica pueden terminar fuera del área de contenido visible, fuera de la pantalla.

Lo que es irónico, los dispositivos Android no parecen tener este problema. También es completamente posible utilizar {position:absolute;} cuando en referencia a la etiqueta de cuerpo y no tiene ningún problema.

Encontré la causa raíz de esta peculiaridad; que es el evento de desplazamiento que no se juega bien cuando se usa junto con la etiqueta HTML o BODY. A veces no le gusta disparar el evento, o tendrá que esperar hasta que el evento de desplazamiento de desplazamiento finalice para recibir el evento. Específicamente, la ventana gráfica se vuelve a dibujar al final de este evento y los elementos fijos se pueden volver a colocar en otro lugar en la ventana gráfica.

Así que esto es lo que hago: (evitar el uso de la ventana, y seguir con el DOM!)

<html> 
    <style> 
    .fixed{ 
     position:fixed; 
     /*you can set your other static attributes here too*/ 
     /*like height and width, margin, etc.*/ 
     } 
    .scrollableDiv{ 
     position:relative; 
     overflow-y:scroll; 
     /*all children will scroll within this like the body normally would.*/ 
     } 
    .viewportSizedBody{ 
     position:relative; 
     overflow:hidden; 
     /*this will prevent the body page itself from scrolling.*/ 
     } 
    </style> 
    <body class="viewportSizedBody"> 
    <div id="myFixedContainer" class="fixed"> 
     This part is fixed. 
    </div> 
    <div id="myScrollableBody" class="scrollableDiv"> 
     This part is scrollable. 
    </div> 
    </body> 
    <script type="text/javascript" src="{your path to jquery}/jquery-1.7.2.min.js"></script> 
    <script> 
    var theViewportHeight=$(window).height(); 
    $('.viewportSizedBody').css('height',theViewportHeight); 
    $('#myScrollableBody').css('height',theViewportHeight); 
    </script> 
</html> 

En esencia, esto hará que el cuerpo sea el tamaño de la ventana y no desplazable. El DIV desplazable anidado en el interior se desplazará como el CUERPO normalmente (menos el efecto de oscilación, por lo que el desplazamiento se detiene al tocar). La DIV fija permanece fija sin interferencia.

Como nota al margen, un alto valor z-index en el DIV fijo es importante para mantener el DIV desplazable parece estar detrás de él. Normalmente agrego el tamaño de la ventana y los eventos de desplazamiento también para la compatibilidad de resolución de pantalla alternativa y entre navegadores.

Si todo lo demás falla, el código anterior también funcionará con los DIV fijos y desplazables establecidos en {position:absolute;}.

Answer 9

fijo de pie de página (en este caso con jQuery):

if (navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod' || navigator.platform == 'Linux armv6l') 
{ 
    window.ontouchstart = function() 
    { 
     $("#fixedDiv").css("display", "none"); 
    } 

    window.onscroll = function() 
    { 
     var iPadPosition = window.innerHeight + window.pageYOffset-45; // 45 is the height of the Footer 
     $("#fixedDiv").css("position", "absolute"); 
     $("#fixedDiv").css("top", iPadPosition); 
     $("#fixedDiv").css("display", "block"); 
    } 
} 

// in the CSS file should stand: 
#fixedDiv {position: fixed; bottom: 0; height: 45px; whatever else} 

espero que ayude.

Answer 10

Evítalo en la misma casilla usando transform: --- y posición: fixed. El elemento permanecerá en su posición: estático si hay alguna transformación.

Answer 11

En mi caso, el desplazamiento mostró el elemento position: fixed que originalmente no se mostraba cuando se agregaba al DOM. Así que simplemente activé manualmente el evento de desplazamiento que a su vez desencadenó un redibujado y listo.

window.scrollTo(window.scrollX, window.scrollY);