holographix holographix - 6 months ago 24
Javascript Question

Retrieve width/height of a css3 scaled element

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

getBoundingClientRect() returns the correct values for me.

jsFiddle.