al escalar un elemento con escala css3, se pixela hasta justo después de que se completa la animación. Estoy animación de un elemento con un borde

http://jsfiddle.net/nicktheandroid/5Ytnj/al escalar un elemento con escala css3, se pixela hasta justo después de que se completa la animación. Estoy animación de un elemento con un borde

Cuando agrego -webkit-backface-visibility: hidden; al elemento .circ, causa que se quede pixelada, incluso después de la animación se ha completado.

Me pregunto si hay una manera de conseguir que no se pixele mientras se anima. Lo he visto en la versión de desarrollo de Google Chrome.

Fuente

2012-04-03 android.nick

He estado teniendo el mismo problema, excepto que tengo el problema con la escala de un botón con texto dentro. Es un problema similar a lo que se menciona [aquí] (http://stackoverflow.com/q/8024061/432913). Tener el borde no importa, [sucede también con el texto] (http://jsfiddle.net/Qk9gX/). – will

Está bien, así que creo que se me ocurrió una alternativa;

esencialmente; no use "escala". use "scale3d" y configúrelo para que la imagen más grande que desee sea scale3d(1,1,1).

Here es un ejemplo de lo que había en el círculo. Cambié la escala a 5, porque no quería poner 0.222222222222222222222222222222222 en la función scale3d ...

[edit] Así que probé la demostración jsfiddle nuevamente, en una computadora sin aceleración de hardware, y el efecto de pixelación se había ido. Entonces parece que es el mismo problema que con scale3d, donde lo convierte en una textura y luego lo escala. usted puede hacer lo que en el circ3 div here.

Fuente

2012-05-01 18:39:48 will

¡Gracias, esto también solucionó mi problema! Estableciendo explícitamente scale3d (1,1,1) para el estado de inicio (es decir, clase CSS), luego usando scale3d (1.5, 1.5, 1.5) para la clase de transición, hizo el truco. Debería ser la respuesta aceptada. –

No hace ninguna diferencia para mí, la imagen es clara inicialmente, se pixela durante el escalado con scale3d y se borra después de la animación. – Rob

@Rob Estoy bastante seguro de que depende del navegador y también depende de la GPU. Puede cambiarlo en los diversos bits de configuración para firefox, y en Chrome puede agregar un argumento de línea de comando para forzar/desactivar la aceleración de gpu. – will

al escalar un elemento con escala css3, se pixela hasta justo después de que se completa la animación. Estoy animación de un elemento con un borde

Respuesta

Cuestiones relacionadas