8

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.

Web_Designer
  • 72,308
  • 93
  • 206
  • 262
Andrew Lewis
  • 1,251
  • 9
  • 16
  • "I know Edge isn't exactly a great browser" [There are plenty of not-great browsers out there.](http://stackoverflow.com/questions/22457222/ie10-11-uses-transition-webkit-transform/22457802#22457802) – BoltClock Mar 03 '17 at 05:03
  • And in a lot of ways Edge is a *very* great browser. Those ways tend to be limited first to people who have Windows 10 to begin with... – TylerH Mar 03 '17 at 14:48
  • @TylerH, any examples? I want to like Edge but it just keeps letting me down. – Andrew Lewis Mar 15 '17 at 01:22
  • 1
    @AndrewLewis It's one of the fastest and lightest browsers out there; it's got the youngest codebase (except for Brave) which means less technical debt for developers, it works hand-in-hand with extension authors to get existing Chrome or Firefox extensions working in it, it allows rich interaction and drawing right on a webpage, the results of which are sharable with others, etc. Of course if you don't use these features, you probably won't care that they're there. – TylerH Mar 15 '17 at 07:13
  • @AndrewLewis Did you file this bug with Microsoft or find a filing there already? – cjbarth May 28 '18 at 15:55
  • @cjbarth I remember finding a bug report somewhere but I couldn't tell you where. Might be worth raising a new bug report if this is still an issue. – Andrew Lewis Jul 11 '18 at 07:17

1 Answers1

9

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.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • 1
    Thanks for the reply, yes, specifying transition properties was the solution I went with, as `transition-property: all` is pretty egregious anyway. Discovering this behaviour was just such a 'wtf...' moment I was curious to see what others thought. – Andrew Lewis Mar 15 '17 at 01:27
  • 1
    I encountered the same bug event when only "opacity" property was chosen – Arsenii Fomin Jun 28 '18 at 08:30
  • same with "filter" – timlg07 Apr 20 '20 at 09:30