2D Transform Transition dosen't work with VW and VH Units in IE11

Question

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.

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.

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?

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/

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/

UPDATE 3 Ok it still does not work. either with transitions or animations. as soon as i use vw units, it looks just crap.

Thanks

Answer 1

I had a similar problem in IE, setting the initial value in 0.1vh instead of 0 helped me.

Answer 2

Try using % instead of vh with a translate3D transform (not translateY). That solved it in my scenario. Hope that works for you!