Css transition not working 100% of the time in IE11
If you go here http://jsbin.com/dibobapaluti/1/edit you will see the links change after 1 second thanks to the css transition.
If you open this link in IE11, you will notice that if you hover over the links quickly, the 1s transition will be skipped and the link will immediately change its background color and color.
If you do the same in Google Chrome, you won't see this issue, no matter how fast you hover over the links, the 1s navigation rule applies.
Do you know 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>
source to share
You should apply the transition to a
, not its hovering state.
I'm not sure if this is a bug, as well as the different behavior of browsers handling the experimental property .
The element is no longer in a hover state when the cursor leaves it, and placing it transition
on a:hover
will have unexpected consequences. Note that in the above example, when you move the cursor away from the element, it returns to its non-hover state without transition. Moving the transition to a
cancels the animation when the hover state is no longer active, as shown in the demo below.
The demo below has no issue 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>
source to share