CODEWITHSUNDEEP
javascriptcsscss-transforms
Trung
Trung

Reputation: 1032

CSS transform scale and Javascript offsetHeight

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

Upvotes: 1

Views: 1560

Answers (1)

Moob
Moob

Reputation: 16184

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

This previous question has some insights and possible solutions.

Upvotes: 1

Related Questions