holographix holographix - 2 years ago 103
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.


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