How to retrieve the real size of a div after transform scale is applied?

Question

After I applied a transform: scale(n) to a div, the width and height I obtain via javascript stay the same.

The following illustrates the setup.

console.log($('.parent1').width())
console.log('parent1 w ' + $('.parent1 .container').width())
console.log('parent1 h ' + $('.parent1 .container').height())

$('.parent2').css('transform', 'scale(1.5)')
console.log('parent2 w ' + $('.parent2 .container').width())
console.log('parent2 h ' + $('.parent2 .container').height())

.parent {
  width: 250px;
}

.parent1 {
  height: 100px;
}

.parent2 {
  height: 100px;
}

.container {
  display: block;
  height:50%;
  width:50%;
  margin:auto;
  border:solid 1px red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent parent1">
  <div class="container">
  </div>
</div>

<div class="parent parent2">
  <div class="container">
  </div>
</div>

As you can see from the print out in the console, the width and height of the second container is the same as the first one. However for a user the second container is actually larger.

How can I obtain the actual size of $('.parent2 .container')?

The scale is applied from another process and the scale factor is not accessible to me.

You can apparently use `element.getBoundingClientRect()` (found here: https://stackoverflow.com/questions/5603615/get-the-scale-value-of-an-element) — , Dec 18 '17 at 11:47
@ChrisG you can, it's fast, and it has a great browser support. — Vergil Penkov, Dec 18 '17 at 11:51

Hasan Haghniya · Accepted Answer · 2017-12-18T12:05:38.110

Use getBoundingClientRect()

console.log($('.parent1').width())
console.log('parent1 w ' + $('.parent1 .container').width())
console.log('parent1 h ' + $('.parent1 .container').height())

$('.parent2').css('transform', 'scale(1.5)')
console.log('parent2 w ' + $(".parent2 .container")[0].getBoundingClientRect().width)
console.log('parent2 w ' + $(".parent2  .container")[0].getBoundingClientRect().height)

.parent {
  width: 250px;
}

.parent1 {
  height: 100px;
}

.parent2 {
  height: 100px;
}

.container {
  display: block;
  height:50%;
  width:50%;
  margin:auto;
  border:solid 1px red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent parent1">
  <div class="container">
  </div>
</div>

<div class="parent parent2">
  <div class="container">
  </div>
</div>

Why the scaled width/height is not 1.5x the original width/height? — Anthony Kong, Dec 18 '17 at 12:06

How to retrieve the real size of a div after transform scale is applied?

1 Answers1