CSS3 color transition not working in Chrome

Question

The links in the left menu in this website have a CSS3 transition property of the color, which changes on mouse hover. It's not working in Chrome 16 or 17 (the color change is sudden), whereas other transitions in the website do. It works in Firefox, Opera, and even Safari, which uses webkit like Chrome, so I don't think it might be a problem with my CSS. What then?

Here's my CSS of this part (the full CSS is here):

#menu a
{
color: gray;
transition: color 0.5s;
-moz-transition:color 0.5s; /* Firefox 4 */
-webkit-transition:color 0.5s; /* Safari and Chrome */
-o-transition:color 0.5s; /* Opera */
}

#menu a:visited
{
color: gray;
}

#menu a:hover
{
color: black;
}

UPDATE! Apparently this has probably been fixed in 18 beta. However, if you have encountered this problem, please visit the bug report linked in the accepted answer below and star the issue.

Answer 1

@Nijikokun I can confirm the same thing. :visited links do not transition correctly in Chrome. Hooray. It seems like this is an issue that cropped up in version 16 and never got fixed. There are a few bug reports open on the Chromium site.

http://code.google.com/p/chromium/issues/detail?id=101245&q=visited%20transition&colspec=ID%20Pri%20Mstone%20ReleaseBlock%20Area%20Feature%20Status%20Owner%20Summary

Answer 2

I tried to find a workaround (more details in my blog: http://kyuumeitai.posterous.com/the-case-of-the-chromes-transition-hover-bug)

It seems if you declare a:visited with color (color, background, border-color, etc) transparent it will work as a workaround. I haven't tested extensivelly yet, glad to receive feedback.

Answer 3

This is not a -non- working issue, what it is is the :visited link is not transitioning, so it may work for you if you have not clicked on it, but if you have, it will not.

I do not know a solution, I am still looking for one...

Answer 4

. . I thought it would be nice to notice that this it not a bug, but intended behavior. Quoting the Mozilla Developer docs:

Impact on web developers

Overall, this shouldn't affect web developers too significantly. There are, however, a few special cases that may require changes to sites:

(...)

CSS transitions won't be supported for visited links. Fortunately, CSS transitions are very new, and there are few sites using them at this point, so this isn't likely to impact many people at this point.

Answer 5

As Darren Kovalchik wrote in his asnwer ( https://stackoverflow.com/a/8524199/1010777 ), the Chrome has a bug on this.

A possible workaround is to apply color animation on the parent element of the link, and set the link's color to inherit. In this case the animation works well even if the link is :visited.

html:

<span class="whateverLinkParent">
    <a href="#">whateverLinkText</a>
</span>

css:

.whateverLinkParent { animation: whateverTextColorAnimation 1s infinite; }
.whateverLinkParent a { color: inherit; }
@keyframes whateverTextColorAnimation {
    0%, 100% { color: #686765; }
    50% { color: #2E2D2B; }
}

Of course this workaround can't work if setting the link's parent's color is a problem, but in every other cases it gives an easy and clean solution.

Answer 6

Try using #ccc and #000 rather than gray and black.

edit: Like so: http://jsfiddle.net/qtzEj/

Hope that helps :)

Answer 7

Two of my link transition work, but the rest doesnt in chrome. They all use the same setting. It seems they work when the link is either mailto: or callto: -- oddly strange if you ask me.

Answer 8

If you remove color from :visited behavior then it should work as expected. When color is set in :visited behavior, even :hover color (without transition) does not work as expected.

Answer 9

I still ran into the same issue and found a solution that worked for me.

I was able to fix it by using the :link pseudo class like this:

#menu a, #menu a:link {
  color: gray;
  transition: color 0.5s;
}

#menu a:hover {
  color: black;
}