在chrome中使用translate3d会在页面底部创建空白区域

Question

我在使用translate3d CSS属性动画div时出现问题 .box div必须在页面中向上滑动，.container div必须向上移动一些像素。

除非您在触发页面之前将页面完全向下滚动，否则动画效果很好。如果你向下滚动页面并开始动画，一个空白区域会突然冒出来，我无法弄清楚那是什么。

Here's the CodePen

$("input.toggle").click(function () {
    $('.container').toggleClass('move');
$('.box').toggleClass('move');
});

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);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">

  <div class="container">
<input type="button" class="toggle" value="CLICK ME" />    
    <p>
      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.
    </p>
    <p>
      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.
    </p>
  </div>
  <div class="box"></div>
</div>

更清楚如何重现问题我做了一些GIF：

它应该如何运作

重现错误：
向下滚动页面并单击按钮，使div跳起来留下一个空白区域。

我认为这是一个Chrome错误，因为它在Firefox上运行良好（尚未测试其他浏览器）。 任何人都可以告诉我什么是错的？即使页面向下滚动，如何使这个动画仍能正常工作？

使用translate代替translate3d的

编辑不会改变这种奇怪的行为。

Answer 1

我无法找到发生这种情况的特殊原因，但将transfrom3d属性更改为2d transform属性可解决问题， 因为你没有使用z值，所以它适用于这种情况;

编辑： 重新检查笔我看到我改变了translateY属性......

我认为你的问题发生的原因是给容器div一个相反的过渡而不是盒子最终留下底部的空间

check my pen