title: CSS: Wrong position of "transform: scale();" container children
body: <p>I have a container element with long content which is scaled:</p>
  
  <pre><code>.container {
    transform: scale(0.9);
  }
  </code></pre>
  
  <p>inside this container I have a child <code>div</code> which is used to be a popup. It's positioned absolute with top <code>50%</code></p>
  
  <pre><code>.popup {
    width: 300px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
  }
  </code></pre>
  
  <p>but unfortunately when container is scaled this <code>50%</code> is not working. I need to use <code>~240%</code> if it appears on the bottom of a page.</p>
  
  <p>Do you now some specifics on applying positioning on children of scaled elements?</p>
  
  <p><strong>DEMO:</strong> <a href="http://labs.voronianski.com/test/scaled-positioning.html">http://labs.voronianski.com/test/scaled-positioning.html</a></p>