MS Edge CSS过渡闪烁 [英] MS Edge CSS transition flickering

问题描述

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

I've noticed a strange issue with CSS transitions in MS Edge.

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

Basically if you have a transition, between hover states for example, but the styles defined for those hover states are over-written in the CSS cascade, Edge will switch to the over-written styling for the duration of the transition, then switch back.

此问题在这里也得到了很好的描述: https://www.webmasterworld.com/css/4791912.htm

The issue is described fairly well here too: https://www.webmasterworld.com/css/4791912.htm

我还创建了一支笔来演示该问题: http://codepen.io/powerbored/pen/OWqXRw

I have also created a pen demonstrating the problem: 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并不是一个很好的浏览器，但是我真正想看到的是对这里实际发生的情况以及为什么可能发生的原因的解释.

I know Edge isn't exactly a great browser but I what I'd really like to see is an explanation of what is actually happening here and why it could be happening.

推荐答案

在Microsoft Edge中，有关transition-property: all的某些问题使后代元素在过渡期间继承了动画值，而不是无限期地保留其指定值.这似乎是针对Microsoft Edge的CSS过渡实现的，甚至 Internet Explorer 都可以正常运行，并且仅当transition-property为all时才会发生-如果仅指定需要过渡的属性，Microsoft Edge的行为正常.

There's something about transition-property: all that's causing the descendant element to inherit the animated value during the transition, instead of keeping its specified value indefinitely, in Microsoft Edge. This appears to be so specific to Microsoft Edge's implementation of CSS transitions, that even Internet Explorer behaves correctly, and it only occurs when transition-property is all — if you specify only the properties that need transitioning, Microsoft Edge behaves correctly.

这就是我能告诉你的.好吧，这是显而易见的事实，那就是不正确的行为.

That's all I can tell you. Well, that, and the obvious fact that this is incorrect behavior.

这篇关于MS Edge CSS过渡闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！