我在屏幕上制作一个元素,但在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;
}
