After combining offsetHeight with scale transformation, I experienced a strange result. Below is my simple HTML code:
<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>
Despite the fact that the second <div> appears twice as big as the first one on the screen, I anticipated that the second <div>'s offsetHeight would be greater than the first one.
My query is: Why does elem01.offsetHeight consistently equal elem02.offsetHeight in this scenario? Could it be that the browser does not consider the transform when calculating the element's offsetHeight?
Thank you