CODEWITHSUNDEEP
csscss-transitionsmicrosoft-edge
Andrew Lewis
Andrew Lewis

Reputation: 1371

MS Edge CSS transition flickering

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.

Upvotes: 8

Views: 7346

Answers (1)

BoltClock
BoltClock

Reputation: 723678

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.

Upvotes: 9

Related Questions