Get Element Dimensions After CSS Transform

I've been playing a lot with meta viewports recently due to seeing many HTML5 TV apps coded explicitly for 1280x720 which you'll see on many HD televisions.  We all know that it's a much better practice to use responsive design than hardcode dimensions but, that aside, meta viewports are meant to do the scaling.  So it's CSS transforms, specifically scale(), to the rescue.

In creating a meta viewport shim, I needed to calculate an element's dimensions after it had been scaled.  Properties like clientWidth and innerWidth will return the element's original width, ignoring the transform.  To get the scaled size you must use getBoundingClientRect:

var originalWidth = myElement.innerWidth; // 1280
var originalHeight = myElement.innerHeight; // 720

originalElement.style.transform = 'scale(1.5)';

console.log(originalElement.getBoundingClientRect());

/*
ClientRect {
  bottom: 1080
  height: 1080
  left: 0
  right: 1920
  top: 0
  width: 1920
}
*/

The example above sets the scale and returns different desired height and width dimensions based on the scale.  getBoundingClientRect returns more than just height and width by position coordinates as well.

I was worried I wouldn't be able to accomplish this feat but getBoundingClientRect was the perfect solution!