title: CSS3 collapse works with latency
body: <p>I want to make an expandable block using css transitions.</p>
  
  <pre><code>.box {
      width: 300px;
      max-height: 30px;
      overflow: hidden;
      background: #aaa;
      -webkit-transition: max-height 400ms ease-in-out;
      -moz-transition: max-height 400ms ease-in-out;
      -ms-transition: max-height 400ms ease-in-out;
      -o-transition: max-height 400ms ease-in-out;
      transition: max-height 400ms ease-in-out;
  }
  .box.open {
      max-height: 999px;
  }
  </code></pre>
  
  <p>Here's working example: <a href="http://jsfiddle.net/qswgK/" rel="nofollow">http://jsfiddle.net/qswgK/</a>.</p>
  
  <p>When I expand the block, it slides down well, but when I want to collapse it, it occurs with some latency.
  This is noticed in lastest versions Chrome, Firefox, Opera and IE.
  Why does it happen and May I avoid this without using javascript animations?</p>
  
  <p><strong>P.S.</strong> If use height animation instead of max-height, collapse works well, but I need collapse and expand block with unknown expanded height.</p>