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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了2D变换过渡不适用于IE11中的VW和VH单元相关的知识,希望对你有一定的参考价值。

当我尝试使用过渡动画转换translateY()时,IE11和10出现了一个奇怪的问题。我有一个天空盒,天空里面有500vh的高度。必须根据视口中的当前部分上下移动此天空。视口是一个绝对的:位置元素,它可以处理内容等等。

当我现在设置天空让我们说变换: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无法使用变换与vh和vw单位!这是一个10vh的简单translateX的小例子。它与LOL相反。我完全不知道那里发生了什么 - .-

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

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

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

更新3好吧它仍然无法正常工作。无论是过渡还是动画。一旦我使用大众单位,它看起来只是废话。

谢谢

答案

尝试使用%而不是vh和translate3D转换(不是translateY)。这在我的场景中解决了它。希望对你有用!

另一答案

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

以上是关于2D变换过渡不适用于IE11中的VW和VH单元的主要内容,如果未能解决你的问题,请参考以下文章

CSS过渡不适用于变换:翻译

颜色的过渡是即时的? [复制]

CSS 动画过渡不适用于 Firefox

vh搭配vw进行响应式布局

css VH和VW单元可能会导致iOS设备出现问题。要解决此问题,请创建针对iO的宽度,高度和方向的媒体查询

css VH和VW单元可能会导致iOS设备出现问题。要解决此问题,请创建针对iO的宽度,高度和方向的媒体查询