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

Tengo la esperanza de que alguien tenga la solución. El problema es que la fijación de los elementos en posición no se actualiza cuando el usuario se desplaza hacia abajo/arriba en un iOS móvil de Safari.

InformationsquelleAutor Tower | 2011-02-03

12 Comentarios

  1. 66

    Una gran cantidad de navegadores móviles deliberadamente no admiten position:fixed; sobre la base de que los elementos fijos podría obtener en el camino en una pantalla pequeña.

    La Quirksmode.org el sitio tiene un muy buen post en el blog que explica el problema: http://www.quirksmode.org/blog/archives/2010/12/the_fifth_posit.html

    También consulte esta página para obtener una tabla de compatibilidad de mostrar que los navegadores móviles de apoyo position:fixed;: http://www.quirksmode.org/m/css.html

    (pero tenga en cuenta que el móvil del navegador mundo se mueve muy rápidamente, así que tablas como esta puede no estar actualizada por mucho tiempo!)

    Actualización:
    iOS 5 y Android 4 son ambos informó de la posición:soporte fijo ahora.

    He probado iOS 5 a mi mismo en una tienda de Apple el día de hoy y puedo confirmar que funciona con posición fija. Hay problemas con el zoom y panorámica en torno a un elemento fijo, aunque.

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

    Tiene hasta la fecha información sobre Android, Opera mini y mobile) & iOS.

    • position:device-fixed sería una especie de redundante. position:fixed sólo debe trabajar para especificaciones de W3C.
    • el device-fixed solución no era parte de mi respuesta. Puede o no puede tener mérito como una sugerencia, pero la razón por la que el vínculo era la explicación de la cuestión en lugar de su propuesta de solución. En cualquier caso, las cosas han cambiado mucho desde que esta respuesta fue publicado (como dije que lo haría), y un montón de nuevos dispositivos de apoyo fixed. Usted todavía necesita para lidiar con los dispositivos más antiguos que no, sin embargo.
    • Así que tengo curiosidad, ¿qué es exactamente la solución para el problema en cuestión? Los enlaces que se suministra aunque posiblemente útil, no resuelven el problema a la mano. De no ser cansado, pero la gente tiende a upvote respuestas que en realidad no son respuestas aquí, en TAN.
    • En el momento en que escribió la respuesta, no había realmente una buena solución a la pregunta. El enlace que me dio fue la mejor conversación que sabía de explicar porque eran las cosas de la manera que fueron, que en la ausencia de una solución era tan buena como la que yo podía ofrecer. Las cosas han cambiado en el período intermedio, por lo que la discusión en el enlace no es relevante, y hay soluciones, pero eso es como era en el tiempo.
    • En realidad, la posición de:fijo de obras para la escala 1, pero cuando el usuario amplía el ipad no funciona bien. posición:dispositivo fijo existen?? Es válido css atributo de safari en ios?
    • no existen cuando esta respuesta fue publicado; es un desarrollo más reciente destinados a resolver los problemas descritos en esta pregunta. Por lo tanto, definitivamente no funcionará en los dispositivos más antiguos. Los dispositivos más nuevos pueden o no la admiten; tendrías que revisar los dispositivos y versiones de sistema operativo para confirmar.
    • El compat tabla muestra que todos los principales navegadores móviles, incluso las versiones anteriores, ahora de una posición de apoyo fijo. Tal vez la respuesta puede ser actualizado para reflejar esto?
    • Esta no es una solución! Sólo indetify un problema y todos sabemos que hay un problema.
    • siempre mire la fecha en que la respuesta fue publicado antes de reaccionar frente a ella. Este fue respondida en 2011. Los navegadores se han movido en un tiempo desde luego, la respuesta era correcta, precisa y útil cuando se publicó, pero no es relevante. Es simplemente fuera de fecha.
    • Spudley. ¿Cómo puedo volver atrás en el tiempo para saber en 2011 fue de trabajo? Ahora no está funcionando y los visitantes deben saber que para que no se trate de algo que AHORA no está funcionando. No ofensa. Tal vez necesitamos una actualización aquí.

  2. 37

    Fijo de posicionamiento no funciona en iOS como en los equipos.

    Imagina que tienes una hoja de papel (la página web) bajo una lupa(la vista), si mueve la lupa y el ojo, que ver una parte diferente de la página. Esta es la forma en iOS funciona.

    Ahora hay una hoja de plástico transparente con una palabra, esta hoja de plástico permanece estacionaria no importa qué (la posición:elementos fijos). Así que cuando usted mueve la lupa del elemento fijo aparece a mover.

    Alternativamente, en lugar de mover la lupa, mover el papel (la página web), manteniendo la hoja de plástico y una lupa todavía. En este caso la palabra en la hoja de plástico aparecerá a permanecer fijo, y el resto de contenidos se moverán (porque de hecho lo es) Este es un tradicional navegador de escritorio.

    Así que en iOS el área de visualización se mueve, en un tradicional navegador de la página web se mueve. En ambos casos los elementos fijos permanecen todavía en la realidad; aunque en iOS los elementos fijos parecen moverse.


    La manera de conseguir alrededor de esto, es seguir los últimos párrafos en este artículo

    (básicamente desactivar el desplazamiento en conjunto, tienen el contenido por separado, en un desplazamiento que div (véase el cuadro azul en la parte superior de la artículo relacionado), y el fijo elemento posicionado absolutamente)


    «position:fixed» ahora funciona como es de esperar en iOS5.

  3. 22

    posición: fijo no funciona en android/iphone para el desplazamiento vertical. Pero usted necesita asegurarse de que su meta etiquetas están totalmente establecidos. e.g

    <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 estás pensando en tener la misma página de trabajo en android pre 4.0, es necesario establecer la posición superior, o un pequeño margen será añadido por alguna razón.

    • …cambio de la orientación de destruir esta…
    • Esto funcionó para mí y no me dolía la orientación.
    • Lamentablemente, esto no funciona para mí, la prueba en iOS 7.1
    • Esta realidad trabajaba para mí. Antes, la posición:se fija en una oculta el elemento de entrada (ver puro css fuera de la pantalla de navegación) que causó el navegador se bloquee en el iphone ios 8.3, pero no en la tablet. Después de que funciona bien.
    • No funciona en iPad iOS 10.3, horizontal en la Plaza de pie. Concedido autor dice que este enfoque es para «teléfonos».
  4. 20

    ahora de soporte de apple que

    overflow:hidden;
    -webkit-overflow-scrolling:touch;
    • Esto es exactamente lo que yo buscaba para resolver mi background-size: cover y fixed problema en el iPad
    • Esto funciona en el Móvil de Safari en iOS 7. Nota: Esto no funcionará para los usuarios que no han actualizado a esta versión todavía.
    • no es cierto @NeilMonroe funciona en iOS 5 y versiones posteriores
    • A continuación, debe haber algunas otras variables en el trabajo. He probado en iOS 6 y no estaba funcionando, a continuación, en iOS 7 y se fue.
    • hmm tal vez. estoy seguro de que he hecho en iOS 6 sin problema, pero tal vez he utilizado una variable. no recuerdo
    • esto fue realmente útil, pero por lo que parece, overflow se ha establecido para scroll

  5. 15

    Fija de Pie de página (aquí 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.

  6. 11

    He tenido este problema en el Safari (iOS 10.3.3) – el navegador no volver a dibujar hasta que el touchend evento disparado. Elementos fijos no aparecen o se cortó.

    El truco para mí fue la adición de transformación: translate3d(0,0,0); a mi posición fija elemento.

    .fixed-position-on-mobile {
      position: fixed;
      transform: translate3d(0,0,0);
    }

    EDITAR – ahora sé el porqué de la transformación soluciona el problema en el hardware de aceleración. La adición de la transformación 3D activa la aceleración de GPU para hacer una suave transición. Para más información sobre el hardware de aceleración de la retirada de este artículo: http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css.

  7. 7

    Evitar en el mismo utilizando el cuadro de transformación:— y position:fixed. Elemento va a permanecer en la posición de:estática si hay alguna transformación.

  8. 6

    Que terminó con la nueva jQuery Mobile v1.1: http://jquerymobile.com/blog/2012/04/13/announcing-jquery-mobile-1-1-0/

    Ahora tenemos un sólido re-escritura que proporciona una verdadera fija barras de herramientas en el
    muchas de las plataformas más populares y de forma segura cae de nuevo a la estática de la barra de herramientas
    posicionamiento en otros navegadores.

    La mejor parte acerca de este enfoque es que, a diferencia de la JS-basado
    las soluciones que impone el antinatural desplazamiento de la física a través de todos los
    plataformas, nuestro desplazamiento se siente 100% nativo porque es. Esto significa
    que el desplazamiento se siente a la derecha en todas partes y funciona con el tacto, la rueda del ratón
    y el teclado de entrada de usuario. Como un bono, nuestro CSS basado en la solución es super
    ligero y no el impacto de compatibilidad o de accesibilidad.

    • También muy elegante (pero definitivamente una solución) es este método para permitir que los objetos fijos en iOS sin usar jQuery o JavaScript (sólo usa CSS). Es bastante aplicable universalmente. Si quería un «flotante» position:fixed elemento aparezca en frente de su desplazamiento de la página, simplemente te tienes que darle un mayor z-index valor, de modo que se mantiene en el frente.
    • definitivamente esto no responde a la pregunta.
  9. 1

    usando jquery soy capaz de llegar con este. no desplazamiento suave, pero se hace el truco. usted puede desplazarse hacia abajo, y el fijo div 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 HTML

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

    EL 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 mostrar 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>
  10. 1

    Aunque el atributo CSS {position:fixed;} parece (en su mayoría) que trabajan en los nuevos dispositivos iOS, es posible que el dispositivo capricho y el retroceso a {position:relative;} en ocasiones y sin motivo ni razón. Normalmente, la eliminación de la caché va a ayudar, hasta que algo sucede y la peculiaridad de que ocurra de nuevo.

    Específicamente, de la propia Apple Preparar el Contenido de Su Web para iPad:

    Safari en el iPad y Safari en el iPhone no tiene tamaño variable de windows. En
    Safari en el iPhone y el iPad, el tamaño de la ventana se establece en el tamaño de la
    pantalla (menos de Safari controles de interfaz de usuario), y no puede ser cambiado
    por el usuario. Para moverse de una página web, el usuario cambia el nivel de zoom
    y la posición de la ventanilla como el doble toque o pellizcar para acercar o
    a cabo, o por tocar y arrastrar para girar la página. Como un usuario cambia
    el nivel de zoom y la posición de la ventanilla ellos lo están haciendo dentro de un
    el contenido visible de la zona de tamaño fijo (es decir, la ventana). Esto significa
    la página web elementos que tienen su posición «fija» a la ventanilla
    puede terminar fuera el contenido visible de la zona, fuera de la pantalla.

    Lo que es irónico, dispositivos Android, no parece tener este problema. También es posible usar {position:absolute;} cuando en referencia a la etiqueta body y no tiene ningún problema.

    He encontrado la causa raíz de este capricho; que es el evento scroll no jugar bonito cuando se utiliza en conjunción con el HTML o el CUERPO de la etiqueta. A veces no se como se desencadena el evento, o usted tendrá que esperar hasta que el desplazamiento de swing evento termine para recibir el evento. Específicamente, el área de visualización es re-dibujado en la final de este evento y elementos fijos se pueden volver a colocar en otro lugar la ventanilla.

    Así que esto es lo que yo hago: (evitar el uso de la ventanilla, y con el palo de 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 ventanilla y no desplazable. El desplazable DIV anidados dentro de desplazamiento como el CUERPO normalmente lo haría (menos el efecto de giro, de modo que el desplazamiento se hace parada en touchend.) El fijo DIV permanece fijo sin interferencias.

    Como una nota del lado, un alto z-index valor en el fijo DIV es importante para mantener el desplazable DIV parecen estar detrás de él. Yo normalmente agregar en el cambio de tamaño de ventana y eventos de desplazamiento también para cross-browser y alternativos de resolución de pantalla de compatibilidad.

    Si todo lo demás falla, el código anterior también trabajará con ambos fijas y desplazables DIVs conjunto para {position:absolute;}.

  11. -1

    En mi caso, el desplazamiento mostró el position: fixed elemento que no originalmente mostrar cuando se añade a la DOM. Así que inicia manualmente el evento scroll, que a su vez provocó un rediseño y voila.

    window.scrollTo(window.scrollX, window.scrollY);
  12. -2

    aquí está mi solución a esto…

    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>

    Explicación es que la posición fijada para la div mantener el div en el fondo todo el tiempo, a continuación, estiramos la div ir a todos los rincones del navegador (siempre que el organismo margen = 0) mediante el (izquierda,derecha,arriba,abajo) simultáneamente.

    Por favor, asegúrese de que usted no use el ancho y la altura, ya que esto anulará la parte superior,izquierda,derecha,abajo las opciones.

Dejar respuesta

Please enter your comment!
Please enter your name here