holographix holographix - 1 year ago 84
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 Source

getBoundingClientRect() returns the correct values for me.

jsFiddle.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download