CSS3 animation/keyframes, transforming with vw in IE11 issues

Question

I'm animating an element across a screen, but in IE11, weird things are happening. I'm in development, so I can't share the live code. But I created a fiddle to replicate the problem.

Basically, when I use viewport width aka vw with transform:translateX(); inside a @keyframes to use in an animation, IE11 doesn't reflect the width of the viewport in the animation.

So the Fiddle I created takes an element that is positioned in the center of the viewport:

1. starts it at the left edge of the screen with half of the element appearing
2. moves to the center of the viewport, pauses
3. and then moves to the right edge of the viewport, with half the element off of the screen

Fiddle: https://jsfiddle.net/Bushwazi/7xe0wy8z/4/

• In the website I'm working on, IE11 animates the element as if the page were 10 times wider
• In the fiddle, the animation runs in reverse and never makes it to the edge of the page.

So in both cases, IE11 isn't using the correct width for vw inside CSS animations.

HTML:

<!--
  The animation on the red block should start half on the screen, pause at the center of the screen and then finish by pausing at the edge of the screen, half of the box off of the screen
-->
<article>
  <p>IE11 weirdness when transforming vw inside keyframes</p>
  <strong><span>BLOCK</span></strong>
</article>

CSS:

* {
  margin: 0;
  padding: 0;
}

@-webkit-keyframes movee {
  0% {
    -webkit-transform: translateX(-50vw);
            transform: translateX(-50vw)
  }
  10% {
    -webkit-transform: translateX(-50vw);
            transform: translateX(-50vw)
  }
  40% {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw)
  }
  60% {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw)
  }
  90% {
    -webkit-transform: translateX(50vw);
            transform: translateX(50vw)
  }
  100% {
    -webkit-transform: translateX(50vw);
            transform: translateX(50vw)
  }
}

@keyframes movee {
  0% {
    -webkit-transform: translateX(-50vw);
            transform: translateX(-50vw)
  }
  10% {
    -webkit-transform: translateX(-50vw);
            transform: translateX(-50vw)
  }
  40% {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw)
  }
  60% {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw)
  }
  90% {
    -webkit-transform: translateX(50vw);
            transform: translateX(50vw)
  }
  100% {
    -webkit-transform: translateX(50vw);
            transform: translateX(50vw)
  }
}

body {
  background-color: #eee;
  background-image: -webkit-linear-gradient(left, black 50%, transparent 50.01%);
  background-image: linear-gradient(90deg, black 50%, transparent 50.01%);
  background-size: 20% 100%;
  background-position: 0 0;
  font-family: sans-serif;
  height: 100vh;
}

article {
  position: relative;
  height: 100%;
  width: 100%;
  display: block;
}

p {
  width: 100%;
  background: #FFF;
  text-align: center;
  padding: 1em 0;
}

strong {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100px;
  width: 100px;
  background: red;
  border: blue solid 3px;
  position: absolute;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  text-align: center;
  margin: -50px 0 0 -50px;
  -webkit-animation: movee 5.0s linear infinite 0.0s;
          animation: movee 5.0s linear infinite 0.0s;
}

Answer 1

According to caniuse:

In IE 10 and 11, using vw units with 3D transforms causes unexpected behavior

Although 2D & 3D transforms are different, it is likely that they are handled by simliar methods within a browser. So I would say that VW/VH/VMAX/VMIN are not supported in IE11 for transitions.

Is there any reason you don't want to use % ?

Like this:

* {
  margin: 0;
  padding: 0;
}

@-webkit-keyframes movee {
  0% {
    left: -1%;
  }
  10% {
    left: -1%;
  }
  40% {
   left: 50%;
  }
  60% {
    left: 50%;
  }
  90% {
    left: 101%;
  }
  100% {
   left: 101%;
  }
}

@keyframes movee {
  0% {
    left: -1%;
  }
  10% {
    left: -1%;
  }
  40% {
   left: 50%;
  }
  60% {
    left: 50%;
  }
  90% {
    left: 101%;
  }
  100% {
   left: 101%;
  }
}

body {
  background-color: #eee;
  background-image: -webkit-linear-gradient(left, black 50%, transparent 50.01%);
  background-image: linear-gradient(90deg, black 50%, transparent 50.01%);
  background-size: 20% 100%;
  background-position: 0 0;
  font-family: sans-serif;
  height: 100vh;
}

article {
  border: thin dotted green;
  position: relative;
  height: 100%;
  width: 100%;
  display: block;
}

p {
  width: 100%;
  background: #FFF;
  text-align: center;
  padding: 1em 0;
}

strong {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100px;
  width: 100px;
  background: red;
  border: blue solid 3px;
  position: absolute;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  text-align: center;
  margin: -50px 0 0 -50px;
  -webkit-animation: movee 5.0s linear infinite 0.0s;
          animation: movee 5.0s linear infinite 0.0s;
}

<!--
  The animation on the red block should start half on the screen, pause at the center of the screen and then finish by pausing at the edge of the screen, half of the box off of the screen
-->
<article>
  <p>IE11 weirdness when transforming vw inside keyframes</p>
  <strong><span>BLOCK</span></strong>
</article>

Answer 2

One posibility would be to use transform as percentages.

Since you want the amout of the transform to be 100vw, lets set an extra element with a width of 100vw. Now, the transform on this element is just 100%.

I had to use negative offsets to avoid the appearance of an undesired horizontal scrollbar

* {
  margin: 0;
  padding: 0;
}

@keyframes movee {
  0% {
            transform: translateX(-100%)
  }
  10% {
            transform: translateX(-100%)
  }
  40% {
            transform: translateX(-50%)
  }
  60% {
            transform: translateX(-50%)
  }
  90% {
            transform: translateX(0%)
  }
  100% {
            transform: translateX(0%)
  }
}

body {
  background-color: #eee;
  background-image: linear-gradient(90deg, black 50%, transparent 50.01%);
  background-size: 20% 100%;
  background-position: 0 0;
  height: 100vh;
}

article {
  position: relative;
  height: 100%;
  width: 100%;
  display: block;
}

p {
  width: 100%;
  background: #FFF;
  text-align: center;
  padding: 1em 0;
}

.base {
  width: 100vw;
  animation: movee 5.0s linear infinite 0.0s;
    top: 50%;
    position: absolute;
    height: 100px;
}
strong {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100px;
  width: 100px;
  background: red;
  border: blue solid 3px;
  position: absolute;
  right: 0px;
  top: 0px;
  box-sizing: border-box;
  text-align: center;
  margin: -50px 0 0 -50px;
}

<article>
  <p>IE11 weirdness when transforming vw inside keyframes</p>
  <div class="base">
    <strong><span>BLOCK</span></strong>
  </div>
</article>