Potential bug with MS Edge

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.

Potential bug with MS Edge

transition cascade

Readie

not2easy

Readie

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week