What happens to Safari when calculating height?

Question

JavaScript

Found a strange feature of Safari, if you set the height of an element and then request it, then some magic happens:

$('.js--post-grid').height(400);
console.log($('.js--post-grid').first().height());    // = 0
console.log($('.js--post-grid').last().height());     // = 0
setTimeout(function(){
  console.log($('.js--post-grid').first().height());  // = 23
},1);
setTimeout(function(){
  console.log($('.js--post-grid').first().height());  // = 23
},2);
setTimeout(function(){
  console.log($('.js--post-grid').first().height());  // = 23
},10);
setTimeout(function(){
  console.log($('.js--post-grid').first().height());  // = 201
},100);
setTimeout(function(){
  console.log($('.js--post-grid').first().height());  // = 400
},1000);

The height depends on the time at which it was requested, how so?

Example , see console.
Tested in Safari 9.1 and Safari 9.1.1

Answer 1

If you replace time = .4s with time = 0s, then the magic disappears, which means that the actual height is displayed in Safari.