Get Element Dimensions After CSS Transform

By  on  

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!

Recent Features

  • By
    5 Awesome New Mozilla Technologies You’ve Never Heard Of

    My trip to Mozilla Summit 2013 was incredible.  I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out.  MozSummit provided the perfect reminder of how brilliant my colleagues are and how much...

  • By
    Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event...

Incredible Demos

  • By
    jQuery Link Nudging

    A few weeks back I wrote an article about MooTools Link Nudging, which is essentially a classy, subtle link animation achieved by adding left padding on mouseover and removing it on mouseout. Here's how to do it using jQuery: The jQuery JavaScript It's important to keep...

  • By
    MooTools Window Object Dumping

    Ever want to see all of the information stored within the window property of your browser? Here's your chance. The XHTML We need a wrapper DIV that we'll consider a console. The CSS I like making this look like a command-line console. The MooTools JavaScript Depending on what you have loaded...

Discussion

  1. Hello, David,

    I want to remind you, that only Gecko is adding height and width as can be read in the note at https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect#Return_value.

    Compare it to MSDN: https://msdn.microsoft.com/en-us/library/ms536433%28VS.85%29.aspx

    So your solution is not cross-browser-compatible.

    I’d look for whether jQuery can solve it and then inspect their solution ;-)

  2. This is a good solution but it has limited application. I guess we need to work a bit more on looking for answers that may be applied to multiple scenarios instead of specific ones.

  3. Dan

    This might be a very simple question but wondered if you could help.

    Is it possible to calculate the scale factor based on the height and width of an element, I think its the math I’m struggling with.

    If I know my element is 1280 x 720 to begin with …

    … and after scaling the element I know the dimensions are: 1920 x 1080

    How do I calculate the scale (1.5)?

  4. Ben

    Dan, it’s just “1920 / 1280 = 1.5”, or “1080 / 720 = 1.5”. The scale is just the ratio between the height of one to the height of the other, or the width of one to the width of the other.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!