How do you measure the height of a HTML element scaled with CSS3 transform?

Question

First, you'll need to know the context.

Browser: 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;
}

The effective height of the li element is 101px. If you try to get the height in Javascript by any of the following methods (assuming jQuery 1.4.2 is loaded):

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

you get the same answer: 480px.

If you mouseover the element using Chrome's Developer tools, it shows you the dimensions: 136x101. (Actually, the first number, the width, changes with the window's width, but it is not revelvant to my question.) I don't know how Chrome arrives at that, but I sure would like to.

Does anyone know of a way to get the height of an element after being scaled, or do you have to calculate it somehow?

Answer 1

This is actually a very interesting question, this is what I was able to come up:

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

There might be a more straightforward way to get the real height.

Answer 2

I don't think there is a cross-browser (or even a browser-specific) way to do this. What I'd just do is

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

Chrome probably gets the value directly from its rendering engine.