Problema con las transformaciones CSS en Internet Explorer


       En la anterior entrada (ZOOM vs SCALE en CSS) hablábamos de escalado y la propiedad zoom, y parecía funcionar todo perfecto en cualquier navegador, pero me he encontrado un problema del que no consigo salir.

       El ejemplo sobre el que vamos a trabajar es muy sencillo, un div que contiene otros dos divs, el primero vacío, con el fondo rojo y el segundo con una imagen dentro. La idea es aplicar el zoom al div contenedor de los otros dos, y que todo parezca escalado, contenedor y contenido. Esto sería un ejemplo de como aplicar transformaciones sobre elementos que internamente son arbitrariamente complejos. Voy a comenzar exponiendo como funcionaría con rotaciones, para después volver al escalado.
 Original sin Sin rotar (chrome)


Chrome


Firefox


Safari


Opera

Internet Explorer 9

Internet Explorer 8

       Es lo esperado, funciona en todos, menos Internet Explorer 8, que no soporta transformaciones CSS estándar. Así que para IE8 vamos a usar un filtro, tal y como vimos en la entrada sobre como girar una imagen:

-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9848077530122079, M12=-0.17364817766693127, M21=0.17364817766693127, M22=0.9848077530122079, SizingMethod='auto expand')";


Internet Explorer 8

       Aquí ya sospechamos que algo raro pasa, no está haciendo caso al filtro y sigue sin estar girado. Lo malo es que con la propiedad zoom hace lo mismo, vamos a probar con un zoom de 0.1 para que se note la diferencia, debería ser 10 veces más pequeño.

Internet Explorer 8

Internet Explorer 9

       En el 8 los separa, como si hubiera hecho escalado al contenedor y no al contenido, y en el 9 no se inmuta. Esto significa que solo podemos usar el zoom sobre elementos como imágenes o texto, los cuales podríamos escalar directamente cambiando el tamaño, y no sobre elementos arbitrariamente complejos. Para comprobar esto vamos a realizar el zoom sobre los hijos del div contendor, con ayuda de jQuery:

$('#elem').children().andSelf().css("zoom", 0.1);

Internet Explorer 8

Internet Explorer 9

       Internet Explorer 9, responde casi aceptablemente, así si que escala cada elemento, aunque al hacerlo de forma individual, la separación entre elementos cambia, perdiendo la maquetación que tuviéramos. Pero en el caso de IE8 es todavía peor, ¡solo escala la imagen y deja el div rojo sin escalar!

       Vamos a dar por perdido el Internet Explorer 8, para el que no se me ocurre qué hacer, y vamos a intentar salvar a IE9, usando las transformaciones CSS y scale:

-ms-transform: scale(0.1);

Internet Explorer 9

       Así conseguimos que solo cambiando la propiedad del contenedor, se escale el contenido aceptablemente, por muy complejo que sea. El problema es que IE9 si soporta zoom y en teoría íbamos a trabajar con zoom y no con escalado, lo que hará más complejo el código para decidir que solución se aplica.