Geek Answers Handbook

CSS3 animation / keyframes, conversion from vw to IE11 problems

I am animating an element across the screen, but strange things happen in IE11. I am in development, so I can not share live code. But I created a violin to reproduce the problem.

Basically, when I use aka vw viewport width with transform:translateX(); inside @keyframes for use in animation, IE11 does not reflect the width of the viewport in the animation.

So, the Fiddle I created takes an element located in the center of the viewport :

  • launches it at the left edge of the screen with a half element appears
  • moves to the center of the viewing area, pauses
  • and then it moves to the right edge of the viewport, with half the item exiting the screen.

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

  • On the website I'm working on, IE11 animates the element as if the page was 10 times wider
  • In the violin, the animation works in reverse order and never reaches the edge of the page.

So, in both cases, IE11 does not use the correct width for vw inside the CSS animation.

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; }
+5
source share
3 answers

According to caniuse :

In IE 10 and 11, using vw blocks with 3D transforms leads to unexpected behavior

Although 2D and 3D transforms are different, it is likely that they are processed by the simliar methods in the browser. Therefore, I would say that VW / VH / VMAX / VMIN are not supported in IE11 for transitions.

Is there a 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>
+3
source

One possibility would be to use percent conversion.

Since you want the conversion amout to be 100vw, specify an additional element 100vw wide. Now the conversion of this element is only 100%.

I had to use negative offsets to avoid the appearance of an unwanted 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>
+1
source

Could you try this CSS. An alternative solution to get the same result without IE11 problems. Hope this helps.

 * { margin: 0; padding: 0; } @-webkit-keyframes movee { 0% { left: 0%; } 10% { left: 0%; } 40% { left: 50%; } 60% { left: 50%; } 90% { left: 100%; } 100% { left: 100%; } } @keyframes movee { 0% { left: 0%; } 10% { left: 0%; } 40% { left: 50%; } 60% { left: 50%; } 90% { left: 100%; } 100% { left: 100%; } } 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; overflow: hidden; } 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; }
-1
source

More articles:


All Articles