我在屏幕上制作一个元素,但在IE11中,奇怪的事情正在发生.我正在开发中,所以我无法分享实时代码.但我创造了一个小提琴来复制这个问题.

基本上,当我使用视口宽度aka vw与transform：translateX();在要在动画中使用的@keyframes中,IE11不会反映动画中视口的宽度.

所以我创建的小提琴取一个位于视口中心的元素：

>使用元素的一半在屏幕的左边缘开始

出现

>移动到视口的中心,暂停

>然后移动到视口的右边缘,一半元素离开屏幕

>在我正在开发的网站中,IE11将元素设置为动画效果

页面宽10倍

>在小提琴中,动画反向运行

并且永远不会到达页面的边缘.

所以在这两种情况下,IE11都没有在CSS动画中使用正确的vw宽度.

HTML：

IE11 weirdness when transforming vw inside keyframes

BLOCK

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;

}