2D 变换过渡不适用于 IE11 中的 VW 和 VH 单位

Question

当我尝试使用转换为转换 translateY() 设置动画时，我遇到了 IE11 和 10 的一个奇怪问题。我有一个天空盒，里面的天空高度为 500vh。这个天空必须根据视口中的当前部分上下移动。 视口是一个处理内容等的绝对位置元素。

当我现在将天空设置为让我们说 transform: translateY(-400vh) 时，它在除 IE11 和 10 之外的所有浏览器中都能正常工作。看起来元素在转换开始时消失并在转换完成时出现。

您可以在此小提琴中找到一个简短的示例：https://jsfiddle.net/90q394vz/4/

body, html {
  height:100%;
  width:100%;
  overflow:hidden;
}
* { box-sizing:border-box; }

header {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  background:#fff;
  z-index:100;
}

.skybox {
    //height: 100%;
    z-index: 1;
    //width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
}
.skybox .sky {
    height: 500vh;
    width: 100%;
    background: red;
    transform: translateY(-400vh);
    transition: all 0.8s ease-in-out;
}
.sec1 .skybox .sky {
  transform: translateY(-400vh);
}
.sec2 .skybox .sky {
  transform: translateY(-300vh);
}
.sec3 .skybox .sky {
  transform: translateY(-200vh);
}
.sec4 .skybox .sky {
  transform: translateY(-100vh);
}

.viewport {
  width:100%;
  height: 100%;
  position: relative;
  z-index:10;
  text-align:center;
  padding: 50px;
}
.viewport-content {
  background: rgba(255,255,255,0.2);
  margin: 100px auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <span onclick="$('body').removeClass().addClass('sec1')">scroll 1</span>
  <span onclick="$('body').removeClass().addClass('sec2')">scroll 2</span>
  <span onclick="$('body').removeClass().addClass('sec3')">scroll 3</span> 
  <span onclick="$('body').removeClass().addClass('sec4')">scroll 4</span> 
</header>
<div class="skybox">
  <div class="sky">
    <div style="height:100vh; padding:100px;">sky part 5</div>    
    <div style="height:100vh; padding:100px;">sky part 4</div>    
    <div style="height:100vh; padding:100px;">sky part 3</div>    
    <div style="height:100vh; padding:100px;">sky part 2</div>    
    <div style="height:100vh; padding:100px;">sky part 1</div>    
  </div>
</div>
<div class="viewport">
  <div class="viewport-content">
    im content in top of the sky yeahhh...ö
  </div>
</div>

知道如何解决这个问题吗？

更新 1： 经过另一次测试，我认为 IE 无法将 Transform 与 vh 和 vw 单位一起使用！这是一个简单的 10vh translateX 的小例子。它朝相反的方向发展，哈哈。我完全不知道那里发生了什么-.-

https://jsfiddle.net/8hne5ckd/3/

更新 2 几个小时后我发现，当我将转换从简单的 2d 转换 (translateY(-100vh)) 更改为 translate3d( 0，-100vh，0）。我不知道为什么 IE 可以使用 3dtransforms 处理 vh 和 vw 单位，但不能处理 2dtransforms。 如果有更多知识的人能解释我为什么会很好。

https://jsfiddle.net/8hne5ckd/7/

更新 3 好的，它仍然无法正常工作。无论是过渡还是动画。一旦我使用大众单位，它看起来就是垃圾。

谢谢

Answer 1

我在 IE 中遇到了类似的问题，将初始值设置为 0.1vh 而不是 0 对我有帮助。

Answer 2

尝试使用 % 而不是 vh 与 translate3D 变换（不是 translateY）。这在我的场景中解决了它。希望对你有用！

Answer 3

以字符串形式提供值，例如 "20vh" 而不是 20vh。这在我的情况下有效。