title: Calculate div width/height when inside a zoom/scale transform
body: <p>I have a div inside another div with transform scale applied.</p>
  
  <p>I need to get the width of this div after the scale has been applied. The result of .width() is the original width of the element.</p>
  
  <p>Please see this codepen:
  <a href="https://codepen.io/anon/pen/ZMpBMP" rel="nofollow noreferrer">https://codepen.io/anon/pen/ZMpBMP</a></p>
  
  <p><strong>Image of problem:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/WoNYM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WoNYM.png" alt="enter image description here"></a></p>
  
  <p><strong>Hope this is clear enough, thank you. Code below:</strong></p>
  
  <hr>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="outer"&gt;
    &lt;div class="inner"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.outer {
    height: 250px;
    width: 250px;
    background-color: red;
    position: relative;
    overflow: hidden;
  }
  
  .inner {
    background-color: green;
    height: 10px;
    width: 10px;
    transform: translate(-50%);
    position: absolute;
    top: 50%;
    left: 50%;
  
    transform: scale(13.0);
  }
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$(function() {
  
     var width = $('.inner').width();
  
     // I expect 130px but it returns 10px
     //
     // I.e. It ignores the zoom/scale
     //      when considering the width
     console.log( width );
  
  });
  </code></pre>