javascript - style - transition transform css
Repintar la desaceleración con CSS a través de Javascript en los navegadores webkit (6)
Bueno, creo que me las he arreglado para averiguarlo! Para que lo sepas, los enlaces de publicaciones originales no reflejan los cambios como los he hecho en mi entorno localhost.
El posicionamiento absoluto del contenedor de diapositivas ha solucionado el problema que se estaba produciendo con las velocidades de repintado después de la transición (al aplicar las propiedades CSS). Obviamente, sacarlos del DOM ha hecho el truco, permitiendo que la pintura se realice de manera mucho más eficiente.
Originalmente no intenté esto demasiado porque sabía que esto agregaría mucho trabajo a la funcionalidad de redimensionamiento. Originalmente, tenía la intención de no cambiar el tamaño en JS, y confiar en los porcentajes para hacer el trabajo sucio. El posicionamiento absoluto del contenedor causaría el colapso de la ventana de presentación de diapositivas, inutilizando el cambio de tamaño nativo.
Sin embargo, de todos modos ya estaba teniendo problemas con la representación de sub-píxeles en otros navegadores, así que supongo que era hora de morder la bala y confiar en valores de píxeles fijos. Luego usé JS para manejar el cambio de tamaño, usando el evento de cambio de tamaño de la ventana. Todo parece bien, sin embargo, la presentación de diapositivas todavía estaba colapsada debido al posicionamiento. Asignar valores de altura no estaba funcionando correctamente, por lo que fue un poco perdido.
Afortunadamente, me encontré con un pequeño truco para configurar el ''padding-top'' de la ventana de visualización en un valor porcentual, calculado de forma dinámica (altura de presentación deseada, establecida en el panel de configuración de este script, dividida por el ancho deseado). Como los porcentajes de la parte superior del relleno son relativos al ancho del elemento, esto hizo un gran trabajo al proporcionar una altura de respuesta y corregir la ventana de nuevo (ya no parece colapsado).
Aquí hay algo de información sobre el uso de relleno superior para elementos sensibles que mantienen la relación de aspecto. Gran pequeño truco: http://f6design.com/projects/responsive-aspect-ratio/
Todo está bien ahora, y las cosas funcionan bien en los navegadores iOS y webkit. Todo es extremadamente rápido y funciona como debería. Cuatro días después, y finalmente se resuelve. No estoy contento de tener que recurrir a JS para cambiar el tamaño, pero supongo que siempre iba a suceder debido a las inconsistencias porcentuales entre los navegadores. Muchos decimales = nada bueno!
Gracias a todos los que intentaron apuntarme en la dirección correcta. Definitivamente me puse a pensar y aprendí muchas habilidades de depuración que puedo usar de nuevo para asegurarme de que las transiciones estén funcionando bien. ¡Gracias de nuevo!
He estado trabajando en un script de presentación de diapositivas que utiliza transiciones CSS3, o animar jQuery cuando no están disponibles. He creado una función personalizada para hacer las animaciones de diapositivas, que lo hace de manera apropiada. Todo parecía funcionar bien, pero he tenido un gran problema durante las pruebas.
Por una razón u otra, hay un gran retraso en la aplicación de jQuery CSS antes y después de la transición en grandes presentaciones de diapositivas. Por ejemplo, la presentación de diapositivas en el siguiente enlace tiene alrededor de 9900 píxeles de ancho (ancho del contenedor, la mayoría de los cuales está oculto). El contenedor se maniobra para mostrar la diapositiva adecuada, utilizando las propiedades de transición y transformación de CSS3. El retraso ocurre al aplicar el CSS entre las líneas 75 - 82 en la siguiente pegada. En particular, la aplicación de la ''transición'' CSS causa el problema. Agregue el CSS de ''transición'' a la hoja de estilo (en lugar de aplicarlo con JS), y el retraso desaparece. Sin embargo, esta no es realmente una solución, ya que solo queremos usar transiciones CSS3 en propiedades específicas, que pueden variar (usar ''todo'' en la hoja de estilo hará una transición a algunos CSS que no queremos animar, pero cambiamos regularmente).
Función de animación: http://pastebin.com/9wumQvrP
Presentación de diapositivas: http://www.matthewruddy.com/demo/?p=2431
El problema real es con iOS, en el que la presentación de diapositivas (e incluso el navegador a veces) se vuelve completamente inutilizable. No puedo identificar ningún error y realmente he agotado mi conocimiento de la depuración de JS. Estoy seguro de que está relacionado con esta sección de la función después de jugar un poco, y deshabilitar el soporte de CSS3 dentro del complemento elimina el problema por completo.
Estoy completamente atascado, y realmente aprecio cualquier ayuda que alguien pueda dar.
--- Editar ---
He intentado aplicar el CSS con Javascript nativo en lugar de la función .css de jQuery. Los mismos resultados, no hay mejor rendimiento. También vale la pena señalar que esto no está sucediendo en Firefox, y parece ser solo un problema con los navegadores Webkit.
¡Cualquier persona con una solución, estaría feliz de hacer una donación para unas cuantas cervezas! Realmente no puedo resolver esto!
--- Segunda Edición ---
Bien, he estado depurando y puedo ver que la desaceleración es causada por el ciclo de repintado del navegador que está tomando mucho tiempo. ¿Hay una mejor manera de manejar esto que la forma en que ya está haciendo? Posicionar el elemento absolutamente es una forma conocida de reducir la pintura, pero eso no funciona realmente porque la presentación de diapositivas es sensible. El posicionamiento absoluto de las imágenes de diapositivas o las diapositivas en sí hace que se colapse.
--- Tercera Edición ---
Un día después, y he hecho algunos progresos. La adición de ''transición: toda la facilidad de 0s'' a la hoja de estilo de elementos CSS ha eliminado el repintado causado al agregar la propiedad de transición de CSS en línea a través de la función de animación personalizada mencionada en la publicación original. Esto provoca un aumento significativo del rendimiento, especialmente al eliminar la propiedad de transición de CSS en línea cuando la transición en sí misma ha finalizado.
¡Buen material! Sin embargo, ahora todavía hay una desaceleración cuando la traducción de CSS en línea se está eliminando (que se utilizó para crear el efecto de transición acelerada por hardware) después de la transición, y se está aplicando la posición izquierda. Cuando los dos suceden juntos, hay una desaceleración.
Dividiéndolos en dos tareas separadas (la traducción eliminada, luego la posición izquierda agregada en un setTimeout sin tiempo especificado), nuevamente se deshace de las repeticiones = ganancia de rendimiento, y parece que el problema está resuelto. Pero a veces, la propiedad de transición CSS no se anula lo suficientemente rápido, y la eliminación de traductores se anima. No es bueno, y no sé dónde buscar para solucionarlo.
Creo que el problema es que estás cargando enormes imágenes :)
Son demasiado grandes para el contenedor en el que los tiene, por lo que puede reducirlos, lo que es aún más intensivo en recursos.
Intenta redimensionarlos.
Después de pasar un tiempo analizando su código TimeLine con Chrome Dev Tools, creo que podría hacer una optimización.
Por lo que sé, cada una de tus 16 imágenes se vuelve a pintar cada vez que se solicita una animación. Esto me parece bastante obvio, ya que hay 16 imágenes en su ejemplo, y Chrome Dev Tools informa de 16 ejecuciones largas de "Paint" cada vez que se pulsa "Next".
En mi humilde opinión, deberías encontrar una solución que considere traducir solo dos imágenes: la que deseas ocultar y la que quieres mostrar. Por lo tanto, considere la posibilidad de no mover el resto de las imágenes y, en su lugar, dejarlas todas juntas a la imagen mostrada.
Una cosa más, el uso de imágenes reducidas es probablemente hacer que los ciclos de pintura sean más largos. Evítalos cuando puedas.
En primer lugar felicidades por tu depuración! Últimamente he estado trabajando exactamente en lo mismo y descubrí que los dispositivos ios no admiten una gran cantidad de imágenes ubicadas en la misma página. Causa bloqueos y la única solución que encontré fue eliminar elementos en lugar de simplemente esconderlos. El inconveniente es que la eliminación y la adición de elementos causan retrasos, por lo que debe hacerlo de manera inteligente cuando se realicen las transiciones. Pensé que la mejor manera de hacerlo era mantener 3 o 5 imágenes en el DOM y reemplazar el resto con miniaturas de las imágenes, redimensionadas para que se ajusten al original. Cuando se hacen las transiciones, simplemente pongo las imágenes grandes en su lugar ... Espero que esto te ayude un poco en el problema de iOS al menos ...
No estoy seguro de si esto ayuda o no, pero me di cuenta de que utilizas la traducción 3d. Pensaría que una traducción 2D simple sería suficiente, especialmente porque tu tercer parámetro es 0 y podría acelerar el problema. También iría con menos imágenes, como sugirió Armel L., don Aunque no tengo un iPhone para probar ... alternativamente, esta es una solución que usé antes de css3, pero todavía debería funcionar. Mover el elemento que contiene las imágenes usando javascript modificando la izquierda (? y arriba: ¿la demo solo se mueve hacia la izquierda y hacia la derecha? sin los efectos de transición) y de esta manera puede ajustar la frecuencia de actualización, lo que creo podría explicar la desaceleración ... puede llegar a 18 fps sin que nadie lo note, incluso podría ser lo suficientemente bueno con solo 16 fps
Tenía esto cuando estaba diseñando por primera vez un dispositivo de página de estilo carrusel de revista.
Si tiene una serie de imágenes dentro de una "bandeja" larga, incluso si no están dentro de la ventana gráfica, seguirán ocupando el ram, y puede tener aproximadamente cinco o menos antes de que empiecen a ocurrir fugas y desagradables.
Lo que encontré funciona es "esconderlos" ... Pero asegúrate de que ocupen el espacio físico necesario.
Lo que también encontré funcionó fue que uno podría hacer que la imagen actual y la imagen "anterior" sean visibles y mover la bandeja, "desdoblando" a medida que alcanzan esas tres posiciones.
En mi propio sistema, salté la ''bandeja'' que contenía las imágenes e y solo las tenía a -100% de ancho, 100% de ancho y el actual a 0.
Nunca tuve mucha suerte con el carrusel de bandeja larga típico con imágenes de fondo a gran escala ... Especialmente con la aceleración css3.