title: With a negative translateY on child, how to adjust parent height accordingly?
body: <p>I have a website with a header that I slide up on first scroll using translateY(-590px). The problem I get is that all the way on the bottom of my page, I get an extra bit of white space on some browsers.</p>
  
  <p>A demo of the problem in <a href="http://jsfiddle.net/1shxwmv8/3/" rel="nofollow">this fiddle</a></p>
  
  <p>Here's the example code:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="content"&gt;
      &lt;div&gt;block 1&lt;/div&gt;
      &lt;div&gt;block 2&lt;/div&gt;
      &lt;div&gt;block 3&lt;/div&gt;
      &lt;div&gt;block 4&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.content{
      background-color: grey;
  }
  .content div{
      height: 100px;
      color: white;
      background-color: #2f2f2f;
      transition: transform 0.6s ease;
  }
  .content.scrolled div:last-child{
      height: 100px; 
      transform: translateY(-100%);
  }
  </code></pre>
  
  <p><strong>JS (jQuery)</strong></p>
  
  <pre><code>$(function(){
      setTimeout(function(){
          $(".content").addClass("scrolled");
      }, 700);
  });
  </code></pre>
  
  <p>How can I make it so that the parent automatically adjusts its height.</p>
  
  <p>ps
  I use translateY because I have an animation on the sliding and using margin-top would be slow on Safari (because redrawing everything constantly). This is why I have to use translate instead of margin.</p>