webkit-transform sobrescribe el orden de z-index en Chrome 13
Update
Lo siento por no poder agregar el detalle menor que también superponemos muchos elementos div uno encima del otro con z-index.
Después de trabajar más con este problema, parece que el webkit-transform realmente se mete con el orden z-index, y que el problema real no está relacionado con las animaciones en sí.
End update
Actualmente estoy en un proyecto donde desarrollamos una aplicación que es bastante pesada en animaciones CSS3. Somos animando muchos elementos div con -webkit-transform y -webkit-transition.
Todo está bien, hasta hoy donde todos los elementos para ser animados de la página desaparecieron. Parece que Google Chrome se ha actualizado desde 12.xx a 13.0.782.107 m y ahora, de repente, las propiedades CSS3 con prefijos -webkit han dejado de funcionar, y los elementos que tienen esta propiedad aplicada a ellos simplemente no se muestran más. La eliminación de la propiedad -webkit-transform a través del depurador de Chrome hace que los elementos visible de nuevo.
¿Alguien más ha experimentado los mismos problemas, o sabe cómo resolver este problema?
Podría agregar que he intentado eliminar solo los prefijos -webkit (dejando solo transform), que luego muestra los elementos faltantes, pero entonces eso no animará los elementos en absoluto, ya que la propiedad CSS3 transform no es compatible.
También he intentado usar el.style.webkitTransform y el.style.WebkitTransform, sin éxito.
Pasará algún código de ejemplo para explicar. El resultado deseado de esto es aparta sq1 y revela sq2.
HTML:
<div id="sq1" style="z-index:10;">
<div id="sq2" style="z-index:5;">
JS
/* fetch the element */
var el = document.getElementById("sq1");
/* apply CSS */
el.style["-webkit-transition"] = "-webkit-transform 500ms linear";
el.style["-webkit-transform"] = "translate3d(30px, 30px, 0px)";
5 answers
Lo resolví yo mismo a través de ensayo y error. Pensé en informar si alguien más tropieza con este problema. Cabe señalar que este problema no se produjo antes de Chrome se actualizó a Chrome 13 (13.0.782.107 m).
El truco aquí parece ser agregar una operación translate3d al subyacente <div> (sq2) elemento en la declaración (o al menos antes de animar sq1).
De lo contrario, la operación translate3d en el overlying <div> (sq1) hará que el renderizado ignore el z-index y coloque sq1 debajo de sq2. Supongo que esto es porque sq1 se define antes de sq2 en el DOM, por lo tanto sq2 se mostrará encima de él.
Por lo tanto, la solución parece ser poner translate3d en la definición de la <div>: s (añádalo a ambos solo para ser claro):
HTML:
<div id="sq1" style="z-index:10; -webkit-transform: translate3d(0px, 0px, 0px);">
<div id="sq2" style="z-index:5; -webkit-transform: translate3d(0px, 0px, 0px);">
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-08-05 21:38:33
Esto solo debe afectar a cualquier elemento que se posicione como absoluto o relativo. Para solucionar el problema, puede aplicar la siguiente instrucción css a cada elemento que se posicione de esta manera y esté causando problemas:
- webkit-transform: translate3d (0,0,0);
Esto aplicará la transformación al elemento sin hacer realmente una transformación, pero afectando su orden de procesamiento por lo que está por encima del elemento que causa el problema.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-02-27 11:51:30
Creo que debes intentar usar -webkit-transform o webkitTransform en lugar de webkit-transform.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-08-05 08:37:29
Use el.style.WebkitTransform (W mayúscula).
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-08-05 08:49:58
el.style["-webkit-transition"] = "-webkit-transform 500ms linear";
el.style["webkit-transform"] = "translate3d(30px, 30px, 0px)";
Su falta de la - en la segunda línea, este podría ser el problema.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-08-05 08:45:16