jquery - css position safari

¿Error de Mobile Safari en el botón fijo posicionado después de que scrollTop cambió programáticamente...?

Question

Estoy a punto de terminar una página web, pero hay un error en Mobile Safari (iPhone y iPad iOS 5.0.1) con dos botones que están fijos en las esquinas superiores e inferiores ..

Los botones no se desvanecen hasta que, después de hacer clic en enviar en un cuadro de texto que se abre al resto de la página ... Después de que el resto de la página se carga y los botones se desvanezcan, puede hacer clic en cualquiera de ellos y ambos funcionan ...

Sin embargo, al hacer clic en ellos se produce un desplazamiento programático y, una vez que se completa el desplazamiento, ya no puede hacer clic en ninguno de los botones hasta que desplaza físicamente la página con el dedo, incluso con un pequeño desplazamiento de un píxel ...

Lo que he notado es que después del desplazamiento programático si toca ligeramente debajo del botón TOP, verá el resaltado como si tocara el botón BOTTOM y se procesara la acción del botón inferior, lo que me indica que el error es que al desplazarse programáticamente, el botón de posición fija se mueve con el resto de la página y no vuelve a su posición fija hasta que se realiza un desplazamiento táctil real ....

¿Alguien sabe una forma de evitar esto ...?

He agregado una ventana emergente que muestra qué botón se presionó para que pueda probarlo, recuerde que después de presionar por primera vez el botón de abajo (que funciona) tratando de presionar de nuevo, no funcionará, pero haga clic justo debajo del botón de subir y Verás que las acciones del botón hacia abajo están sucediendo ...

http://www.tsdexter.com/ceos

gracias por la ayuda.

Thomas

(También si me puede indicar dónde puedo enviar un error a Apple que también sería bueno, a menos que ya lo haya sido)

EDITAR: simplemente haga clic en cualquiera de las flechas de envío, no necesita ingresar un salario / salario que tiene por defecto

EDIT 2: Aquí hay un ejemplo más simple para mostrar el mismo problema.

http://www.tsdexter.com/MobileSafariFixedPosBug.html

EDIT 3: error informado a Apple

Answer 1

Aquí está mi solución si, como yo, ninguna de las soluciones anteriores funciona para usted.

El truco es:

• Haga su desplazamiento (Animate o scrollTo, etc.)
• Justo después de su desplazamiento, posición: absoluto sus elementos fijos
• En el evento ''touchmove'', restaura la posición: fijo

Aquí un ejemplo:

  $(''body'').animate({
       scrollTop: newPos}, 1000, ''jswing'', function () {
          $(''header'').css({position:''absolute'', top:newPos});
  });

  $(document).bind(''touchmove'',function(){
       $(''header'').css({position:''fixed'', top:''0px''});
  });   

Usé el mismo truco para pie de página adhesivo y otros elementos fijos flotantes.

Answer 2

Código de ejemplo

if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
    $(document).on(''focus'', ''input, textarea'', function() {
        $(''header'').css({''position'':''static''});
    });
    $(document).on(''blur'', ''input, textarea'', function() {
        $(''header'').css({''position'':''fixed''});
    });
}

Answer 3

Descubrí el comportamiento exacto que describes en una aplicación de iPhone que estoy escribiendo. Cargué un montón de texto HTML con un índice en el lado derecho. Después de seleccionar un elemento del menú y desplazar el texto, el menú dejaría de responder (porque la zona de aterrizaje se había desplazado por debajo). También vi que incluso un pequeño desplazamiento del texto volvería a activar el menú de índice.

Creé un caso de prueba y cargué el archivo aquí (si lo ves en un navegador que no es de iPhone, haz que la ventana sea pequeña verticalmente para ver el comportamiento correcto):

http://www.misterpeachy.com/index_test.html

Descubrí que el menú de índice estaba desplazándose con el texto (aunque el menú visible no se movía) después de tocar B y luego tocar de nuevo B. En lugar de desplazarse a B (básicamente no se mueve), se desplazó a D.

En este momento estoy atascado. Espero poder agregar algún código JavaScript (nunca he programado en JavaScript, así que es un pequeño problema) que desplazará el texto un píxel después de levantar el dedo de un elemento del menú (y después de que el texto se haya desplazado) al lugar seleccionado, por supuesto). Tal vez JavaScript pueda detectar el desplazamiento y luego agregar otro desplazamiento a eso.

Answer 4

En caso de que pueda ayudar a alguien:

Tenía exactamente el mismo problema, y ​​mi código se veía algo así (es una aplicación web de una sola página):

window.scrollTo(0,0);
$(''section.current'').removeClass(''current'');
$(target).addClass(''current'');

Pasé horas probando todo (101% de altura en div, cambiando el tipo de posición ...), pero finalmente la última sugerencia descrita en Device-Bugs salvó el día. En mi caso, fue solo una cuestión de desplazamiento cuando los divs no se representan:

$(''section.current'').removeClass(''current'');
window.scrollTo(0,0);
$(target).addClass(''current'');

Answer 5

Estaba teniendo el mismo problema con iOS5 y JQueryMobile. Se corrigió el encabezado y el pie de página. Contenido ampliable y de repente tuve un pie de página fantasma que se podía ver pero no tocar. Tuve un pequeño problema para obtener una posición de cambio recto en absoluto y luego volver al trabajo. Parecía que solo funcionaba algunas veces. Terminé usando esto.

        $(myFixedFooter).css("position", "relative").hide(0, function () {
            $(this).show(0).css("position", "");
        });

Esto desafiante crea un "blip" cuando el pie de página hace su trabajo. Sin embargo, descubrí que el 98% del tiempo el pie de página permanecía en la parte inferior de la página. Todas las otras soluciones y ajustes que encontré y probé no siempre dejaron el pie de página en la parte inferior o no resolvieron el problema en primer lugar.

Con suerte, Apple lo arreglará pronto.

Answer 6

Lo solucioné agregando un div 101% alto y luego (casi) eliminándolo inmediatamente.

Tratar:

<style>
.iosfix {
  height: 101%;
  overflow: hidden;
}
</style>

y cuando te desplazas:

window.scrollTo(0, _NEW_SCROLLTOP_);
$(''body'').append($(''<div></div>'').addClass(''iosfix''));
setTimeout(function() {
  $(''.iosfix'').remove();
}, 500);

También funciona con jQuery.scrollTo.

Vea un ejemplo here .

Answer 7

Otra variación de una solución es aumentar el tamaño del ancho del documento en 1px y luego deshacerlo de inmediato. Esto tiene la ventaja de no crear más elementos y no hay ningún parpadeo que haya experimentado.

https://.com/a/11479118/43217

Answer 8

También encontramos este error en 2 aplicaciones diferentes de iPad, para nosotros la mejor solución fue eliminar temporalmente la posición fija del elemento fijo una vez que el rollo animado había terminado, luego usar window.scroll con el valor vertical que acabábamos de realizar. desplácese hasta, y finalmente, vuelva a aplicar el estilo de posición fija. Causa un pequeño problema ya que el ipad vuelve a renderizar el elemento, pero es preferible al error.

var $fixedElement = $(''#fixedNavigation'');
var topScrollTarget = 300;
$("html:not(:animated),body:not(:animated)").stop().animate({ scrollTop: topScrollTarget }, 500, "swing", function(evt) {
    $fixedElement.css({ "position": "relative" });
    window.scroll(0, topScrollTarget );
    $fixedElement.css({ "position": "fixed" });
});

Answer 9

Tenía varios enlaces en elementos fijos separados (un menú emergente modal + div. Fijo oculto + barra de herramientas fija normal) y ninguna de estas respuestas funcionaba, así que tuve un truco sobre probar variaciones sobre el mismo tema. Al igual que todos estos sugieren que la clave es obtener elementos re-renderizados.

Inicialmente intenté agregar 1px al ancho de los elementos fijos y eliminarlo. Esto causó la re-renderización, pero los elementos re-renderizados se alinearon mal con los elementos no re-renderizados, sospecho que otro resultado de este error de iOS. La respuesta fue simplemente agregar al ancho del cuerpo y restar nuevamente (o establecer en automático), es decir:

//jQuery will calculate the current width and then +1 to this and set it
$(''body'').css(''width'', ''+=1'');

//Remove width css
setTimeout(function() {
  $(''body'').css(''width'', '''');
}, 1);

Si no usa jquery, necesitará obtener el ancho actual de body + 1px y luego establecer el ancho.

Answer 10

Una variación de esto funcionó para mí también. Tratando de no usar marcos donde puedo en el móvil.

    var d = document.createElement("div");
    d.style.height = "101%";
    d.style.overflow = "hidden";
    document.body.appendChild(d);
    window.scrollTo(0, scrollToM);
    setTimeout(function() {
        d.parentNode.removeChild(d);
    }, 10);

Answer 11

Después de pasar un par de horas con esto, encontré una solución: intente desplazarme (tal vez con una animación) y luego vuelva a desplazarme al mismo punto (sin animación).
De esta manera, fuerza al navegador a eliminar la representación incorrecta de la vista.

Ejemplo:

$(''body, html'')
    .animate({scrollTop: 0})
    .scrollTop(0);