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

Community · Accepted Answer · 2017-05-23 11:56:35Z

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.

edited May 23, 2017 at 11:56

CommunityBot

11 silver badge

answered Sep 19, 2013 at 16:39

Moob

16.5k1 gold badge40 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS transform scale and Javascript offsetHeight

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related