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.

Solution 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

Solution 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.

Solution 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...

Solution 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.

Solution 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.

View more solutions

Comments

[Kyle]

Works for me (Chrome 15) jsfiddle.net/Kyle_Sevenoaks/YJFqk/1

[Abhranil Das]

Works on my Chrome 16 too. Now that's a bummer. Why doesn't the same code work on my website?

[Kyle]

Works for me on your website too :) Try not using beta versions of programs, they're not always so stable.

[Simon]

Doesn't work for me anywhere. Tried both latest stable and latest beta of Chrome. Also with Google Web Fonts.

[Abhranil Das]

Should work in the latest stable (15) though. Latest beta (16) has a bug. Darren has provided the link to the bug report in one of the answers.

[Robert Koritnik]

@KyleSevenoaks: It works initially but if you click on your link it stops working (because link becomes :visited).

[Abhranil Das]

Nope, didn't :-( Thanks though. BTW, does it work in your Chrome?

[will]

Yea, I'm on the beta channel. But that is so simple... Try giving Chrome a restart? I know mine sometimes breaks transitions (especially 3d) after an update...

[Abhranil Das]

I don't think that's the issue, Will. Kyle's example above uses 'gray' and 'black' and still works in my Chrome 16. But somehow the same code on my website doesn't.

[Abhranil Das]

I don't really think that's my issue here. I cleared the cache, opened a new incognito window etc. and tried again but the colour still isn't transiting. So it's not a :visited problem. I've seen this problem with color transition in one more page, where the change again was between normal and :hover. In any case, there's a problem with color transitions in this version of chrome.

[Simon]

Nijikokun's suggestion worked for me. I have the same problem as you Abhranil and clearing my cache made the transition work on unvisited links, both with and without Google Web Font. All visited links stopped working however.

[Abhranil Das]

It's a Chrome bug. Please follow Darren's link in one of the answers and star the bug report. And since your post wasn't an answer, it's better you add such posts as comments.

[Abhranil Das]

Your demo works for me, but it's a transition of the background. This bug only occurs, I think, only for color.

[Álex Acuña Viera]

You can make a transition between the same color and changing the opacity.

[bozdoz]

@ÁlexAcuñaViera It didn't work for me to change color opacity to 0. Background worked fine though.

[Abhranil Das]

+1. Developers who have arrived here after encountering the problem are requested to star this issue on this bug report link so that it's taken more seriously.

[Nijikokun]

@AbhranilDas it is fixed in version 18 supposedly.

[Abhranil Das]

@Nijikokun, yeah, I updated my question some weeks back to include that information.

[Anto]

Looks like it will be fixed with Chrome 18.

[rovsen]

still the same sick behavior in 23.0.1271.60 beta-m

[cwiggo]

thank god i found this, really started to wind me up, I thought I was going brain dead as it looked like changing the colour of links was impossible. Thanks for the post +1!!!

[Nijikokun]

They fixed :before and :after in 26, I think :visited was as well, at least it says it on the merged issue from the link.