iPad Parpadeo en desplazamiento automático usando JQuery y el complemento Scrollto

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 muy seguro de cómo solucionar este problema.

¡Cualquier idea sería de gran ayuda!

Gracias de antemano, Shadi

ACTUALIZA 1

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

Answer 1

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!
decir

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

Answer 2

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 o no la cara posterior de un elemento de transformada es visible. El valor predeterminado es visible.

edición

trate de aplicar a cada elemento y ver qué pasa.

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

y tratar

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

Es sólo una suposición muy ...

Answer 3

¿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 4

también confirmará método de Tund Do funciona a la perfección. Si necesita una variación "izquierda/derecha" de lo mismo (como yo) aquí está:

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

yo supongo que se podría combinar los dos, toma la primera posición y la cadena de los anime para un " animación izquierda/derecha/arriba/abajo "también.

Answer 5

Tengo el mismo parpadeo en el 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. Ver esta página: http://melissahie.com/

Answer 6

Tuve el mismo problema.

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

Aquí está con el parpadeo no http://www.sneakermatic.com

Answer 7

Si acaba de desplazamiento vertical de la página se puede sustituir todo el plugin de jQuery scrollTo con esta simple línea:

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

Personalmente hacer algo como esto

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

he descubierto que si trato de hacer el trabajo de otros js mientras que está desplazándose hace que la contracción del navegador y la animación no es Smoot h. Pero si usa la devolución de llamada, se desplazará primero y luego hará lo que necesite.

Puse un -15 en el extremo de .top porque quería mostrar el borde superior del div que estaba desplazándose, 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 8

Si solo necesita desplazamiento vertical, puede usar {'axis':'y'} como configuraciones para el método scrollTo.

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

Answer 9

Gracias Nicole por dar el ejemplo con mootools. Realmente parece ser un problema de jQuery cuando se intenta 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 10

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

Answer 11

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