jQuery y CSS Animations Choppy en Firefox

Estoy trabajando en un minisite que presenta mucha animación jQuery. Funciona bien en Safari, Chrome & IE9, pero la animación es realmente agitada en Firefox (7, 8 & 9) en OSX. Pensé que la animación en CSS sería más fluida, así que me adapted la versión iPad del sitio y lo probé en Firefox. Parece igual de malo.jQuery y CSS Animations Choppy en Firefox

No he pasado mucho tiempo con Firefox, así que no estoy seguro de lo que estoy haciendo mal aquí. ¿Necesito activar la aceleración de la GPU (como el uso de translateZ (0) en Webkit) o solo se usa todo el tiempo para todo (como IE9?) ¿Firefox no es lo suficientemente potente, incluso con la GPU?

Realmente agradecería cualquier ayuda que pueda obtener. Estoy como al final de mi cuerda en esto.

Fuente

2012-01-20 Jordan Acosta

Para que lo sepas, las animaciones son un poco agitadas para mí también. Estoy ejecutando Chrome 16 en Win 7 de 64 bits en un sistema Dual Xeon de cuatro núcleos + nVidia Quadro – xbonez

Después de una buena cantidad de mirar alrededor y hacer preguntas, parece que Firefox simplemente no maneja la animación DOM así como tampoco los otros navegadores. Así que parece que tendré que vivir con animaciones picadas de Firefox.

Fuente

2012-01-29 21:00:28

Últimamente he experimentado demasiados errores con Firefox, todos deberíamos abandonar el navegador. –

Me di cuenta de que las animaciones no tartamudean mientras que Firefox tiene ventanas, Estoy en Win 7 x32. Funcionan muy bien.

Las animaciones son un poco agitadas durante las trandiciones solamente. El resto es bueno & ese sitio web es asombroso & increíble trabajo que has hecho hasta ahora!

Fuente

2012-01-20 09:01:27

Gracias, pero el arte y el concepto son del diseñador, solo lo hice mover y esas cosas. –

Sé que esta pregunta fue hecha hace años, pero me encontré con ella y no hay una respuesta real aparte de 'firefox es una mierda'. El truco para habilitar la aceleración de hardware para animar elementos dom en firefox es agregar una pequeña rotación junto con su traducción. Por ejemplo:

@keyframes square-animation { 
    0%, 100% { 
     transform: translate(600px, 160px) rotate(0.01deg); 
    } 
    50% { 
     transform: translate(355px, 160px) rotate(0.01deg); 
    } 
}

La razón es entrecortado es para evitar el desenfoque cualquier cosa dentro del div ser animado (especialmente de texto). Aunque personalmente no creo que esta sea la opción correcta para el comportamiento predeterminado, puede ver el razonamiento here.

Fuente

2016-11-21 22:55:23

Esto hizo el truco para mí - ¡extraño! – alib0ng0

jQuery y CSS Animations Choppy en Firefox

Respuesta

Cuestiones relacionadas