title: Using translate3d in chrome creates blank space at bottom of page
body: <p>I'm having a problem animating a div using the <code>translate3d</code> CSS property.<br />
  The <code>.box</code> div has to slide up in the page and the <code>.container</code> div has to move up of some pixel.</p>
  <p>The animation works great, unless you scroll the page all the way down before triggering it. If you scroll the page down and start the animation a blank space pops up from nowhere and there's no way I can figure out what is that.</p>
  <p><a href="http://codepen.io/anon/pen/GgzLrK" rel="nofollow noreferrer">Here's the CodePen</a></p>
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("input.toggle").click(function () {
      $('.container').toggleClass('move');
  $('.box').toggleClass('move');
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    position: relative;
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 800px;
    /* this is not necessary, it's just a way to avoid putting a lot more text since the issue happens when you scroll all the way down before clicking on the toggle*/
  }
  
  .wrapper {
    height: 100vh;
  }
  
  input.toggle {
    position: fixed;
    top: 700px;
    left: 50%;
  }
  
  .container {
    width: 100%;
    height: 100vh;
    -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.6, 0, 0.4, 1);
    -moz-transition: -webkit-transform 0.4s cubic-bezier(0.6, 0, 0.4, 1);
    transition: transform 0.4s cubic-bezier(0.6, 0, 0.4, 1);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  .container p {
    padding: 50px;
    margin: 0;
  }
  .container.move {
    -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.6, 0, 0.4, 1);
    -moz-transition: -webkit-transform 0.4s cubic-bezier(0.6, 0, 0.4, 1);
    transition: transform 0.4s cubic-bezier(0.6, 0, 0.4, 1);
    -webkit-transform: translate3d(0, -300px, 0);
    -moz-transform: translate3d(0, -300px, 0);
    transform: translate3d(0, -300px, 0);
  }
  
  .box {
    position: fixed;
    width: 100%;
    height: 500px;
    background: red;
    -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.6, 0, 0.4, 1);
    -moz-transition: -webkit-transform 0.4s cubic-bezier(0.6, 0, 0.4, 1);
    transition: transform 0.4s cubic-bezier(0.6, 0, 0.4, 1);
    -webkit-transform: translate3d(0, 500px, 0);
    -moz-transform: translate3d(0, 500px, 0);
    transform: translate3d(0, 500px, 0);
  }
  .box.move {
    -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.6, 0, 0.4, 1);
    -moz-transition: -webkit-transform 0.4s cubic-bezier(0.6, 0, 0.4, 1);
    transition: transform 0.4s cubic-bezier(0.6, 0, 0.4, 1);
    -webkit-transform: translate3d(0, -300px, 0);
    -moz-transform: translate3d(0, -300px, 0);
    transform: translate3d(0, -300px, 0);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="wrapper"&gt;
  
    &lt;div class="container"&gt;
  &lt;input type="button" class="toggle" value="CLICK ME" /&gt;    
      &lt;p&gt;
        In auctor lobortis lacus. Nullam sagittis. Nulla consequat massa quis enim. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi. Nam eget dui.
  
  Curabitur at lacus ac velit ornare lobortis. Sed cursus turpis vitae tortor. Nulla porta dolor. Vivamus elementum semper nisi. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
      &lt;/p&gt;
      &lt;p&gt;
        In auctor lobortis lacus. Nullam sagittis. Nulla consequat massa quis enim. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi. Nam eget dui.
  
  Aliquam lobortis. Etiam imperdiet imperdiet orci. Quisque malesuada placerat nisl. Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna. Praesent egestas neque eu enim.
      &lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="box"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>to be more clear on how to reproduce the problem i made some gifs:</p>
  <p><strong>HOW IT SHOULD WORK</strong>
  <img src="https://i.stack.imgur.com/WOjdo.gif" alt="this is how it works when the page is not scrolled all the way down, thats exactly what i need it to do" /></p>
  <p><strong>REPRODUCING THE ERROR:</strong><br />
  <em>Scrolling the page down and clicking on the button, makes the div jump up leaving a blank space.</em>
  <img src="https://i.stack.imgur.com/0uvZx.gif" alt="enter image description here" /></p>
  <p>I'm assuming this is a Chrome bug since it works good on Firefox (didn't test other browsers yet).
  Can anyone enlighten me on what is wrong? How can i make this animation work good even when the page is scrolled down?</p>
  <p><strong>EDIT:</strong> using <code>translate</code> instead of <code>translate3d</code> does not change the strange behavior.</p>