IE11中的VW和VH单元无法使用2D转换过渡 [英] 2D Transform Transition dosen't work with VW and VH Units in IE11
问题描述
当我尝试为带有过渡的转换transformY（）设置动画时，我遇到了IE11和10的奇怪问题。我有一个天空盒，里面的天空是500vh的高度。天空必须根据视口中的当前部分上下移动。
视口是一个absolute：position元素，用于处理内容，依此类推。
I got a strange problem with IE11 and 10 when i try to animate a transform translateY() with transitions. I have a skybox with a sky inside which is 500vh height. this sky has to be moved up and down according to the current section in the viewport. the viewport is an absolute:position element which handels the content and so on.
当我现在将天空设置为transformY（-400vh）时，它将在除IE11和10之外的所有浏览器中正常工作。看起来该元素消失了
when i now set the sky to lets say transform: translateY(-400vh), then it works correctly in every browser except IE11 and 10. it looks like the element disappears when the transition starts and appears when the transition is finished.
您可以在此小提琴中找到一个简短的示例： https://jsfiddle.net/90q394vz/4/
You can find a short example in this fiddle here: 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>
有什么办法解决这个问题吗？
Any idea how to fix this?
更新1：在另一次测试后，我认为IE不是能够与vh和vw单位一起使用Transform！这是10vh的简单translationX的一个小示例。它朝相反的方向大声笑。我完全不知道那里发生了什么-.-
UPDATE 1: After another test i think that IE is not able to use Transform with vh and vw units! Here is a small example of a simple translateX of 10vh. It goes in the opposite direction LOL. i have absolutely no idea whats going on there -.-
https://jsfiddle.net/8hne5ckd/3/
更新2 几个小时后，我发现当我将转换从简单的2d转换（translateY（-100vh））更改为translate3d（0，-100vh，0）时，它似乎可以与vh和vw单位一起使用。我不知道为什么IE可以使用3dtransforms来处理vh和vw单位，而不是2dtransforms。
如果有更多知识的人可以向我解释原因，那就太好了。
UPDATE 2 A few hours later i found out, that it seems to work with vh and vw units when i change the transforms from simple 2d transforms (translateY(-100vh)) to a translate3d(0, -100vh, 0). I have no idea why IE can handle vh and vw units withing the 3dtransforms but not in 2dtransforms. Would be nice if someone with more knowledge could explain me why.
https://jsfiddle.net/8hne5ckd/7/
更新3 不行。带有转场或动画。一旦我使用大众汽车，它看起来就很糟糕。
UPDATE 3 Ok it still does not work. either with transitions or animations. as soon as i use vw units, it looks just crap.
谢谢
推荐答案
我在IE中遇到了类似的问题，将初始值设置为0.1vh而不是0可以帮助我。
I had a similar problem in IE, setting the initial value in 0.1vh instead of 0 helped me.
这篇关于IE11中的VW和VH单元无法使用2D转换过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
