Почему.getComputedStyle() представляется единственным широко используемым методом для возврата неверной высоты элемента?

Question

Вопрос: при определенных обстоятельствах .getComputedStyle() по-видимому, возвращает неполное / неправильное значение для height свойство элемента. Теперь я волнуюсь. Известно ли возвращать непредсказуемые или неправильные значения для других свойств?

Предыстория: я использовал .getComputedStyle() пока я не заметил, что он возвращал то, что казалось неправильными значениями для высоты элементов. Поэтому я проверил это по нескольким другим методам.

В приведенном ниже простом тестовом коде все это возвращает 400, что является правильной высотой проверенного элемента.

.offsetHeight

.scrollHeight

.clientHeight

.getBoundingClientRect().height

тем не мение .getComputedStyle().height вернул 300px, который является высотой элемента до применения его заполнения.

'use strict';
 
window.addEventListener('load', measureDiv)
 
function measureDiv() {
  console.log('offsetHeight = ' +document.querySelector('.container').offsetHeight);
  console.log('scrollHeight = ' +document.querySelector('.container').scrollHeight);
  console.log('clientHeight = ' +document.querySelector('.container').clientHeight);
  console.log('getBoundingClientRect().height = ' +document.querySelector('.container').getBoundingClientRect().height);
  console.log('getComputedStyle().height = ' +window.getComputedStyle(document.querySelector('.container')).height);
}

body {
  margin: 0;
  padding: 0;
}
 
.container {
  margin: 120px;
  padding: 50px;
  background-color: green;
}
 
.box_1 {
  padding: 20px;
  background-color: blue;
}
 
.image_container {}

<div class="container">
  
  <div class="box_1">
   
    <div class="image_container"><img src="https://www.cis.rit.edu/~cnspci/courses/common/images/checkerboard-256x256.jpg"></div>
  
  </div>
  
</div>