CSS transition flickers with a:visited in Safari, Chrome, and Firefox, but not Opera

Question

(For browsers that support CSS transitions, including the latest versions of Firefox, Safari, and Chrome. Strangely, this issue does not appear in Opera.)

Has anyone else noticed this? When you put a color transition on a:link, the a:visited transitions to the a:link color before displaying the a:hover color. Check it out:

http://jsfiddle.net/Mgzv9/2/

Can this color flicker be avoided?

Answer 1

I have been banging my head around this problem for a while.

The thing is, that this problem is actually hard to reproduce.

OK, so what happens, sometimes while loading/refreshing a page with color transition on links, the color is first transitioned from the default browser link color, to the CSS defined color. It actually doesn't happen for me, when I open the HTML from disk, but if I put it in a server (even local server), then this problem shows up.

To reproduce the problem, create an HTML, add a stylesheet and define a transition for links, something like this:

a {
  color: red;
    -webkit-transition: color .5s linear;
    -moz-transition: color .5s linear;
    -o-transition: color .5s linear;
    -ms-transition: color .5s linear;
    transition: color .5s linear;
}

a:hover {
  color: green;
}

...and then include the stylesheet in your HTML.

Put the files on a server, and try opening the page in Chrome, try refreshing the site, sometimes you should first see a transition from the default blue color, when the pages loads.

After deconstructing some sites, where there seemed to be no problem with this, I came up with this simple solution.

If you include some Javascript files too, then just place Javascript includes AFTER your CSS includes.

It even work if you just include an empty JS file, after you stylesheet.

Hope this helps!