MS Edge CSS 过渡闪烁

Question

我注意到 MS Edge 中 CSS 转换的一个奇怪问题。

基本上如果你有一个过渡，例如在悬停状态之间，但是为这些悬停状态定义的样式在 CSS 级联中被覆盖，Edge 将切换到覆盖的样式过渡的持续时间，然后切换回来。

这里也很好地描述了这个问题： https://www.webmasterworld.com/css/4791912.htm

我还创建了一个演示问题的笔： http://codepen.io/powerbored/pen/OWqXRw

a {
  transition: all 2s ease-in;
  color: orange;
}

a div {
  color: lightblue;
  // displays in light blue in all browsers except during transitions in Edge
}

a:hover {
  color: red;
}

我知道 Edge 并不是一个很好的浏览器，但我真正想看到的是对这里实际发生的事情以及为什么会发生的解释。

Answer 1

在 Microsoft Edge 中，transition-property: all 导致后代元素在过渡期间继承动画值，而不是无限期地保留其指定值。这似乎特定于 Microsoft Edge 的 CSS 转换实现，甚至 Internet Explorer 也能正常运行，并且仅在 transition-property 为 all — 如果您仅指定需要转换的属性，Microsoft Edge 会正确运行。

我只能告诉你这些。好吧，那是不正确行为的明显事实。

MS Edge CSS 过渡闪烁

MS Edge CSS transition flickering

css

css-transitions

microsoft-edge