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


Tags: javascript,google-chrome,css3

Problem :

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?



Solution :

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.


    CSS Howto..

    How can I vertically align two floated divs?

    How to achieve the following design in css in jquery mobile

    CSS: How to create a button with an arrow placedo on the right

    How to make bootstrap 3 navbar not wrap

    How to prevent a div element to be affected by the box-shadow of another div element?

    How to move the right div to the right with css

    How should I toggle action links based on row hover

    What shape is this, and how can i achieve it using css?

    How to make an image 'pop out' when page is loaded (using jQuery or possibly CSS transitions)

    JavaFx how to align only one column-header in tableview?

    How can I place three block of contents in one line in a way that the middle block is always full width?

    how could I make a textarea dynamically resize with the chrome app window?

    How to style a single QToolButton using qss/css

    How to position a div to be visible but not count towards document width

    How do browsers change font-weight if it's not present in the current font?

    CSS - How do I float one element to the right inside the other div?

    How to center a DIV with CSS?

    How to horizontally center text in bootstrap button?

    Ask Toolbar preventing Bootstrap Modal to show

    How to store “state” in CSS only?

    CSS: How do I prevent the background color of div from going behind the image it is sitting above?

    How to add CSS class attribute for Html helper methods in asp.net mvc (VB.NET)?

    In CSS, how to select a particular tag under mutiple ids?

    How do I apply CSS styling to a
    block?

    custom radio button show value inside

    how to select a Div ID that does not have a specifc class/es

    How/where to center Items on Webpage

    CSS how to push text away from border

    How do you stretch header, content & footer color across a page with everything being centered in a fixed width?

    Issue with floating divs - how can I have the widgets alongside the posts, not below?