css transition doesn't work 100% of the time in IE11

Question

If you go here http://jsbin.com/dibobapaluti/1/edit you'll see that the links change after 1 second thanks to css transition.

If you open that link in IE11 you'll notice that if you hover the links very quickly, the 1s transition is skipped and the link immediately changes its color and background color.

If you do the same in Google Chrome you will not see that issue, no matter how fast you hover over the links, the 1s transition rule will apply.

Do you know if this is a bug?

a {
    display:block;
    width:130px;
    border:1px solid black;
    background-color:#617ACC;
    color:white;
    padding:3px;
    text-decoration:none;
}
#main-nav {
    padding-left:0;
}
li {
    margin-top:11px;
    list-style:none;
}
a:hover {
    background-color:red;
    color:black;
    width:200px;
    transition-duration:1s;
}
a:link:hover {
    font-size:18px;
}
a:visited {
    color:black;
}

<p>test</p>
<ul id="main-nav">
    <li><a href="e.g. '/about/index.html'" title="e.g. 'Information about the company ..." target=_blank>About me</a>
    </li>
    <li><a href="e.g. '/about/index.html'" title="e.g. 'Information about the company ...">My adventures</a>
    </li>
    <li><a href="e.g. '/about/index.html'" title="e.g. 'Information about the company ...">Want to travel too?</a>
    </li>
    <li><a href="e.g. '/about/index.html'" title="e.g. 'Information about the company ...">Contact me</a>
    </li>
</ul>

Answer 1

You should apply the transition to a and not its hovered state.

I'm not sure that this is a bug so much as different behaviour between browsers handling an experimental property.

The element is no longer in the hover state the instant the cursor leaves it and placing transition on a:hover will have unexpected affects. Note that in your example above, when you move the cursor away from the element, it snaps back to its non-hovered state without a transition. Moving the transition to a reverses the animation when the hover state is no longer active, as illustrated in the demo below.

The demo below does not have the problem in IE11.

CSS / HTML / Demo

a {
    display:block;
    width:130px;
    border:1px solid black;
    background-color:#617ACC;
    color:white;
    padding:3px;
    text-decoration:none;
    transition-duration:1s;
}
#main-nav {
    padding-left:0;
}
li {
    margin-top:11px;
    list-style:none;
}
a:hover {
    background-color:red;
    color:black;
    width:200px;        
}
a:link:hover {
    font-size:18px;
}
a:visited {
    color:black;
}

<p>test</p>
<ul id="main-nav">
    <li><a href="e.g. '/about/index.html'" title="e.g. 'Information about the company ..." target=_blank>About me</a>
    </li>
    <li><a href="e.g. '/about/index.html'" title="e.g. 'Information about the company ...">My adventures</a>
    </li>
    <li><a href="e.g. '/about/index.html'" title="e.g. 'Information about the company ...">Want to travel too?</a>
    </li>
    <li><a href="e.g. '/about/index.html'" title="e.g. 'Information about the company ...">Contact me</a>
    </li>
</ul>