小编Jas*_*don的帖子

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

基本上,当我使用视口宽度又名vw与transform:translateX();内部的@keyframes到在动画中使用,IE11不反映的宽度viewport在动画.

所以我创建的小提琴取一个位于以下位置中心的元素viewport:

1. 在屏幕的左边缘开始显示,其中一半元素出现
2. 移动到视口的中心,暂停
3. 然后移动到视口的右边缘,一半元素离开屏幕

小提琴:https://jsfiddle.net/Bushwazi/7xe0wy8z/4/

• 在我正在研究的网站中,IE11将该元素设置为动画,就像页面宽10倍一样
• 在小提琴中,动画反向运行,永远不会到达页面边缘.

因此,在这两种情况下,IE11都没有使用正确的vwCSS动画内部宽度.

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:

* …