Как вы измеряете высоту HTML-элемента, масштабируемого с помощью CSS3-преобразования?

Question

Во-первых, вам нужно знать контекст.

Браузер: 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;
}

Эффективная высота элемента li составляет 101 пикс. Если вы попытаетесь получить высоту в Javascript одним из следующих способов (при условии, что загружен jQuery 1.4.2):

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

вы получите тот же ответ: 480px.

Если навести курсор мыши на элемент с помощью инструментов разработчика Chrome, он покажет вам размеры: 136x101. (На самом деле, первое число, ширина, меняется в зависимости от ширины окна, но это не относится к моему вопросу.) Я не знаю, как Chrome подходит к этому, но я уверен, что хотел бы.

Кто-нибудь знает способ получения высоты элемента после масштабирования, или вам нужно каким-то образом рассчитать его?

Answer 1

Это на самом деле очень интересный вопрос, вот что мне удалось придумать:

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

Возможно, существует более простой способ получить реальную высоту.

Answer 2

Я не думаю, что есть кросс-браузерный (или даже браузерный) способ сделать это.Что бы я только сделал, это

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

Chrome, вероятно, получает значение непосредственно из своего механизма рендеринга.