¿Por qué mis animaciones de jQuery están picado en los navegadores basados ​​en webkit?

Question

estoy trabajando con una animación muy simple: deslizar una línea de imágenes a la izquierda:

$('#button').click(
    function() { 
     $('div#gallery').animate({scrollLeft:'+=800px'}, 1000); 
    } 
); 

(Se supone que es una galería de imágenes; escondo el desbordamiento de mostrar sólo una imagen a la vez.)

De todos modos, a pesar de probar varios parámetros de aceleración, incluso a bajas velocidades la animación fue muy agitada en Chrome y Safari, pero siempre fluida en Internet Explorer y Firefox. (La mayoría de las cuestiones planteadas en línea están a punto IE o Firefox siendo agitado!)

he encontrado la causa, para mí. Es un caso muy especial que probablemente no se aplicará a la mayoría, pero tal vez ayudará a alguien independientemente. Voy a publicar mi respuesta a continuación. (Las pautas del sitio lo permiten, creo).

Answer 1

Para mí, no importaba si era PNG de 24 bits, PNG de 8 bits, GIF, JPEG, etc., si había un imagen grande en la pantalla hubo problemas con mis animaciones. Si tiene elementos z-indexados encima de una imagen grande, intente agregar este CSS a su elemento:

-webkit-transform: translateZ (0);

Para mí, funcionó, pero dejó artefactos de animación.

Lo que finalmente lo resolvió para mí fue simplemente cambiar esto:

$('#myimage').animate({ 
    height: 0, 
    top: '-=50' 
}, 500, 'linear'); 

A esto:

$('#myimage').animate({ 
    height: '-=1' 
}, 1, 'linear').animate({ 
    height: 0, 
    top: '-=50' 
}, 500, 'linear'); 

acabo añade una pequeña animación 1 milisegundo en el principio. Mi idea era que posiblemente "prepararía" Chrome para la animación real que se avecinaba, y funcionó. Es posible que desee cambiarlo a 20 o 50 milisegundos para estar seguro.

Answer 2

En mi caso, el problema no era con el código, sino con las imágenes, específicamente, las imágenes grandes que se han reducido (por la fuerza) a través del ancho css propiedad. Por supuesto, las imágenes más grandes pueden requerir más procesamiento para animar, pero IE y FF parecen manejarlas muy bien reducidas (en mi caso, las imágenes de 2000 píxeles de ancho tenían una escala de 800 píxeles de ancho). Mientras tanto, parece que Chrome y Safari se estancan animando esas imágenes. Una vez que reduje por lotes todas mis imágenes en Photoshop a en realidad tenga 800 px de ancho, las animaciones fueron fluidas en todas partes.

Otros detalles. Estoy usando jQuery 1.7. Me encontré con el problema para animar el elemento img en sí mismo, así como un elemento div con una imagen de fondo.

Answer 3

Me doy cuenta de que este hilo es antiguo, pero con el interés de una codificación eficiente ..., me encontré con un problema similar con animaciones picadas usando Chrome recientemente y en la búsqueda de una solución, encontré este hilo (pero no FF o IE) remontaron el problema a uno de mis iconos de colapso usando un png en vez de un gif (tan pronto como cambié el png por un gif) el navegador webkit no tuvo problemas para producir animaciones fluidas (pero tan pronto como cambié el png en, mis animaciones eran una vez más picadas ...)