CSS transform scale and Javascript offsetHeight

Question

I got a strange result of offsetHeight combining with scale transforming. My simple HTML as below

  <body>
    <div id="id01">
      Some Text
    </div>
    <div id="id02" style="transform-origin: left top; transform: scale(2)">
      Some Text
    </div>
  </body>

  <script>
    var elem01 = document.getElementById('id01');
    var elem02 = document.getElementById('id02');
    alert(elem01.offsetHeight == elem02.offsetHeight);   // Always show true???
  </script>

On the screen the second <div> is bigger (twice) than the first <div> . Thus I expected second <div> 's offsetHeight should be greater than the first one.

My question is: Why elem01.offsetHeight always equals to elem02.offsetHeight in this case? The browser does not use transform to calculate element's offsetHeight ?

Thanks

Answer 1

The transform affects the pixel ratio not the actual amount of pixels in the DOM.

This previous question has some insights and possible solutions.

CSS transform scale and Javascript offsetHeight

Question

1 answers

solution1
0 ACCPTED 2013-09-19 16:39:09

CSS transform scale and Javascript offsetHeight

Question

1 answers

solution1 0 ACCPTED 2013-09-19 16:39:09

solution1
0 ACCPTED 2013-09-19 16:39:09