2011-12-25 17 views
9

Tengo un problema realmente extraño en el que CSS 3D transforma el trabajo algunas veces y otras no. Antes de actualizar a la última versión de Chrome, siempre funcionó, pero con la versión 16 solo funciona al azar.CSS 3D transforma trabajos al azar en Chrome 16

Más específicamente parece que la perspectiva -webkit-no toma, lo que hace que todo sea plano (aunque los elementos aún se transforman). Cambiar la perspectiva en el "firebug" de Chrome después de que la página se haya cargado tampoco afecta nada.

La página en cuestión está aquí: http://exscale.se/__files/uploads/jquery-3d-circle.htm. Sé que hay bastante código pero las cosas relacionadas con las transformaciones 3D están todas en este archivo CSS: http://code.google.com/p/sleekphp/source/browse/trunk/Sites/SleekBase/Modules/Base/CSS/jQuery.threeDCircle.scss

Mi pregunta es: ¿experimentas el mismo problema con mi página o has experimentado alguna vez esto? Y si es así, ¿puedes pensar en algo que lo desencadene?

Debo mencionar que estoy usando Ubuntu 10.10 y Chrome 16.0.912.63.

+0

No veo ningún problema en Chrome 16.09 o Safari en la Mac. Tal vez es un problema de Chrome de Linux? – Scott

+0

Estoy experimentando el mismo problema en Windows en VirtualBox. Es tan extraño que es aleatorio sin embargo. – powerbuoy

+0

mismo cromado pero en win7 x64: sin problemas. - en otro asunto: tenga en cuenta que estas animaciones solo se ven bien en máquinas rápidas. Tuve que cambiar al mejor rendimiento en mi Lenovo X200 para ver una animación fluida ... –

Respuesta

16

Chromium puso en la lista negra a su GPU y se rehusó a hacer CSS en 3D.

la solución es bastante fácil: active la opción "anular la lista de reproducción de software" en "chrome: // flags".

ver https://github.com/bartaz/impress.js/issues/40

+0

¡Dulce! Eso lo hizo. Tan extraño cuando funciona solo al azar (o tal vez no fue tan aleatorio como pensé). – powerbuoy

1

Ir a la Chromium web SCM interface y comprobar que la GPU no está en la lista negra.

Además, ve a chrome: // gpu/y comprueba que Chrome informe CSS 3D como habilitado.

1

Esto es algo que encontré que puede ser el problema. Cuando se utiliza el código

-webkit-perspective: 600px; 

Es necesario tener que en el padre del elemento que desea que afecta. Si está en el elemento real, necesita combinarse con la transformación, como

-webkit-transform: perspective(600px) rotateY(45deg); 
+1

Supongo que no leyó todo el hilo porque, si lo hiciera, notaría que Markus encontró la solución hace aproximadamente 6 meses. – powerbuoy

+0

Bueno, me ayudó a solucionar un problema de FF con un Cardflip 3D que no funcionaba. Utilice --moz-transform: perspective (600px) rotateY (45deg); –