¿Cómo se mide la altura de un elemento HTML escalado con la transformación CSS3?

Question

Primero, necesitarás conocer el contexto.

navegador: Chrome

HTML:

<ul> 
    <li> 
     <div>Hi!</div> 
    </li> 
</ul> 

CSS:

li { 
    -webkit-transform: scale(0.21); 
    -webkit-transform-origin-x: 0%; 
    -webkit-transform-origin-y: 0%; 
} 

div { 
    height: 480px; 
    width: 640px; 
} 

La altura efectiva del elemento li es 101px. Si intenta obtener la altura en Javascript por cualquiera de los métodos siguientes (suponiendo jQuery 1.4.2 está cargado):

$("li")[0].clientHeight; 
$("li")[0].scrollHeight; 
$("li").height(); 
$("li").innerHeight(); 

se obtiene la misma respuesta: 480px.

Si desplaza el mouse sobre el elemento utilizando las herramientas de desarrollo de Chrome, le muestra las dimensiones: 136x101. (En realidad, el primer número, el ancho, cambia con el ancho de la ventana, pero no es relevante para mi pregunta). No sé cómo llega Chrome a eso, pero estoy seguro de que me gustaría.

¿Alguien sabe de una manera de obtener la altura de un elemento después de ser escalado, o tiene que calcularlo de alguna manera?

Answer 1

Esto es realmente una pregunta muy interesante, esto es lo que yo era capaz de llegar:

node = document.getElementById("yourid"); 
var curTransform = new WebKitCSSMatrix(window.getComputedStyle(node).webkitTransform); 
var realHeight = $("li").height() * curTransfrom.d; 

Puede haber una manera más fácil de obtener la altura real.

Answer 2

No creo que haya una forma de hacer esto entre navegadores (o incluso un navegador específico). Lo que acabo de hacer es

var realHeight = $("li").height() * 0.21; 

Es probable que Chrome obtenga el valor directamente de su motor de renderizado.