Question

我制作了这个动画，它在每个浏览器中都像魅力，但IE和Edge。您可以在此处查看页面https://jsfiddle.net/03ddygdx/

.progress-container {
  position: relative;
}

.background-progress-bar, .progress-bar {
  width: 100%;
  height: 10px;
  top: 0px;
  left: 0px;
  position: absolute;
}

.background-progress-bar {
  background-color: pink;
  z-index: 8;
}

.progress-bar { 
  background-color: red;
  z-index: 9;
}

.indeterminate {
  animation: indeterminate 2.5s infinite linear;
}

@keyframes indeterminate {
  0% {
    width: 30%;
    left: 0%;
  }
  25% {
    width: 50%;
    left: 50%;
  }
  50% {
    width: 10%;
    left: 0px;
  }
  75% {
    width: 30%;
    left: 0%;
  }
  100% {
    width: 0%;
    left: calc(100% - 5px);
  }
}

<div class="progress-container">
 <span class="background-progress-bar">
  <span class="progress-bar indeterminate"></span>
 </span>
</div>

在IE和Edge中不应用left属性，将span始终保留在左侧。我已经尝试了-ms-animation属性，但这也不起作用。

如果重要，我在index.html中获得了这个元标记

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Answer 1

编辑：好的，问题是添加了一个calc（）来计算左边属性的大小，所以bug就在那里。

编辑2 ：我创建了一个关于此特定案例的错误报告，因此，如果有任何相关信息，我猜您可以在此处查看https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/12872907/

在墙上撞了几个小时之后，结果证明它必须是一个边缘的bug。将关键帧更改为此可以解决我的问题。

@keyframes indeterminate {
  0% {
    width: 30%;
    margin-left: 0%;
  }
  25% {
    width: 50%;
    margin-left: 50%;
  }
  50% {
    width: 10%;
    margin-left: 0px;
  }
  75% {
    width: 30%;
    margin-left: 0%;
  }
  100% {
    width: 0%;
    margin-left: 100%;
  }
}

这是关于ie-edge示例https://jsfiddle.net/vwty99s9/1/

的工作

我猜这些浏览器在动画上应用左值时遇到了麻烦，因此只需向左更改为margin-left就可以了。

CSS关键帧动画在IE和Edge中无法正常工作

1 个答案: