Welcome to WebmasterWorld Guest from 34.238.194.166

Forum Moderators: not2easy

Message Too Old, No Replies

Potential bug with MS Edge

transition cascade

     
12:19 pm on Feb 19, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Dec 13, 2009
posts: 945
votes: 0


Hello everyone,

Not sure if this is the right place to post this, but I think I've found a bug with CSS transition effects in Microsoft Edge.

Consider the following code:

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
ul {
float: left;
}

li {
color: #00ff00;
transition: 0.3s;
}

li:hover {
color: #0000ff;
}

a {
color: #000000;
}
</style>
</head>
<body>
<ul>
<li><a href="http://www.google.com/">Google</a></li>
<li><a href="http://www.bing.com/">Bing</a></li>
<li><a href="https://www.wolframalpha.com/">Wolfram Alpha</a></li>
</ul>
</body>
</html>
The a tags should always be black - no matter what. In every browser except Edge (even IE!) this is the case.

In Edge, when hovering over the li, the text will briefly flash through the transition effect applied to the li, before being overridden by the a rule.

The only way so far I've found to get around this is to change the transition rule thusly:
transition: color 0.3s;
Explicitly specifying "all 0.3s" has the same problem. As "all" is implied when the properties are omitted, it seems this is where the problem lies.
4:56 pm on Feb 19, 2016 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4407
votes: 316


Transitions are not fully supported in Edge browsers, and not at all before v. 13 according to CanIUse information: [caniuse.com...] There are some known issues mentioned there, but not this specific problem.

It may be that the transition is applied to the link only because the "<li" has no assigned color to transition from (?) and could possibly be avoided by assigning a background-color rather than color (?)
In these thoughts I am guessing you want the background color around the <a link to transition on hover.

Edited to add - reading through the w3c spec for transitions here: [w3.org...] it looks like the timing element is part of the spec.
5:09 pm on Feb 19, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Dec 13, 2009
posts: 945
votes: 0


Nah, this happened purely by accident. I had a transition effect on <a>s, and later I had an image link with an overlay and some white text. The overlay darkened on hover, and I noticed the colour of the text flickering during my cross browser testing.

The thing I find curious about it is why the flickering only happens when you don't explicitly specify which properties are to be transitioned, even when there's only 1 property changing.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members