iphone - sale - IPAD parpadea en desplazamiento automático utilizando el plugin JQuery y Scrollto

ios 12 lanzamiento

Question

Estoy teniendo un problema extraño con la plataforma iOS para una página que estoy desarrollando. This es la página en cuestión. Al hacer clic en cualquiera de las imágenes de casos de estudio, la página primero mostrará el estudio de caso requerido y luego se desplazará hacia allí.

Esto funciona en todos los navegadores de escritorio en Windows y Mac, pero en el iPhone y iPad se obtiene un parpadeo horrible a medida que se desplaza hacia abajo.

No estoy seguro de cómo depurar o solucionar este problema.

¡Cualquier idea sería de gran ayuda!

Gracias de antemano, Shadi

ACTUALIZACIÓN 1

La última página se puede encontrar This . Todavía no he encontrado una solución, si alguien tiene alguna idea, ¡sería increíble!

Answer 1

¿Has probado esto?

$(''a[href=#target]'').
    click(function(){
        var target = $(''a[name=target]'');
        if (target.length)
        {
            var top = target.offset().top;
            $(''html,body'').animate({scrollTop: top}, 1000);
            return false;
        }
    });

Answer 2

Debe incluir {axis: ''y''} en su objeto de opciones. También asegúrese de no haber habilitado la opción de interrupción. Puedes probar esto con {interrupt: false} .

Answer 3

Definir {''axis'': ''y''} lo ha hecho bien. Me ayudó con el deslizamiento hacia arriba / abajo.

Answer 4

Estoy teniendo el mismo parpadeo en iPhone, incluso con las opciones preventDefault y return false de cancelar el evento click predeterminado. Parece que en el dispositivo intenta volver al principio de la página antes de desplazarse. Si tienes activadas las animaciones scrollTop y scrollLeft, realmente no funcionan. Es un problema de jQuery. He visto un método de desplazamiento con mootools que no tiene este problema. Vea esta página: http://melissahie.com/

Answer 5

Gracias nicole por dar el ejemplo con mootools. Realmente parece ser un problema de jQuery al intentar hacer una animación en BOTH scrollTop y scrollLeft.

Con mootools:

var scroll = new Fx.Scroll(window, {duration: 1000, wait: false, transition: Fx.Transitions.quadInOut});
scroll.start(y, x);

¡funciona sin problemas en iOS5!

Answer 6

Necesita agregar e.preventDefault(); a cada llamada .click() . Esto evita la acción predeterminada del navegador, que es permanecer en el mismo lugar. ¡Espero que esto ayude!
es decir

$("#quicksand li, .client-list li").click(function (e) {
  e.preventDefault();
  ...
});

Answer 7

No estoy seguro de si esto se aplica a las animaciones jquery. Pero lo siguiente parece afectar las animaciones de CSS.

http://css-infos.net/property/-webkit-backface-visibility

Sintaxis

-webkit-backface-visibility: visibility;

Parámetros

visibilidad Determina si la cara posterior de un elemento transformado es visible o no. El valor predeterminado es visible.

editar

Intente aplicarlo a cada elemento y vea qué sucede.

*{
 -webkit-backface-visibility: visible;
}

y prueba

*{
-webkit-backface-visibility: hidden;
}

Es solo una conjetura realmente ...

Answer 8

Si solo está desplazando la página verticalmente, puede reemplazar todo el complemento jQuery scrollTo con esta simple línea:

$(''html,body'').animate({scrollTop: $("#scrollingTo").offset().top}, 1000, ''easeOutCubic'');

Personalmente hago algo como esto

$(''html,body'').animate({scrollTop: $("#step-1").offset().top-15}, 1000, ''easeOutCubic'',function(){
  //do stuff
});

Descubrí que si trato de hacer otros js mientras se desplaza, el navegador se contrae y la animación no es fluida. Pero si usa la devolución de llamada, se desplazará primero y luego hará lo que necesite.

Puse un -15 al final de .top porque quería mostrar el borde superior del div que estaba desplazándome, simplemente por motivos estéticos. 1000 es la duración en milisegundos de la animación.

El crédito va al cartel, anima, para el consejo.

Answer 9

También confirmaré que el método de Tund Do funciona a la perfección. Si necesita una variación "izquierda / derecha" de la misma cosa (como lo hice) aquí está:

$(''.pg6'').click(function(){
    var target = $(''#page6'');
    if (target.length)
    {
        var left = target.offset().left;
        $(''html,body'').animate({scrollLeft: left}, 1000);
        return false;
    }
});

Supongo que podría combinar los dos, tomar la posición superior y encadenar los anime para una animación "izquierda / derecha / arriba / abajo" también.

Answer 10

Yo tuve el mismo problema.

El problema es el plugin ScrollTo. En lugar de usar scrollto.js simplemente use .animate con scrollTop. No más parpadeo en el ipad / iphone.

Aquí está sin parpadeo http://www.sneakermatic.com

Answer 11

Si solo necesita scroll vertical, puede usar {''axis'':''y''} como configuración para el método scrollTo.

$.scrollTo(*selector*, *time*, {''axis'':''y''});