Retrieve width/height of a css3 scaled element

Question

I'm fighting against an oddity (I think) of the offsetWidth property.
this is the scenario:

I've got, let's say, a span tag, in my js, at a certain point I perform a css3 transform to this element, like:

        el.set('styles', {             'transform':'scale('+scale+', '+scale+')',      /* As things would be in a normal world */             '-ms-transform':'scale('+scale+', '+scale+')',      /* IE 9 */             '-moz-transform':'scale('+scale+', '+scale+')',         /* Moz */             '-webkit-transform':'scale('+scale+', '+scale+')',  /* Safari / Chrome */             '-o-transform':'scale('+scale+')'       /* Oprah Winfrey */          });          w = el.getWidth();         console.log('after scaling: ' + w); 

at this point the log returns me fuzzy values, like it doesn't know what to say.
any suggestion?

Answer 1

getBoundingClientRect() returns the correct values for me.

jsFiddle.

Answer 2

Transforms don't affect the intrinsic CSS properties, so you are seeing correct behavior. You need to look at the Current Transformation Matrix - as returned from getComputedStyle().webkitTransform in order to figure out how big something has been scaled.

Update: In Firefox 12 and later and Chrome/Safari - as Alex says below, you can use getBoundingClientRect() to take into account any transforms applied to an element

The scale transition starts from 50%/50% because that's the default & correct behavior. If you want it to start from the origin, then you need to set transform-origin: 0% 0%;