MS Edge CSS transition flickering

Question

I've noticed a strange issue with CSS transitions in MS 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.

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

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;
}

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.

Answer 1

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.