greensock 0 delay execution order

when add delay is 0, the to() function is executed before the add() function

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<div id="box"></div>

CSS

#box {
  width: 100px;
  height: 100px;
  background: #ccc;
  display: none;
}

JavaScript

// when the add() delay is 0, the to() function is executed before the add() function
// when i change the delay to anything else, all works as expected
// the same happens of course if i give some duration to the tween
setTimeout(function(){
		new TimelineMax({force3D:'auto', immediateRender: false}).add(function () {
    		document.getElementById('box').style.display = 'block';
				document.getElementById('box').style.opacity = 0;
			}, 0)
  		.to('#box', 0, {
  				opacity: 1
			})
}, 2000)