CSS3 colour transition on links flashing on hover when visited

HTML & CSS
1

Hi all, I’ve not noticed this happening before and I’ve tried a few things to fix it but nothing works.

It works fine until a link is visited. Then when you hover over them they quickly change to the normal link state colour then onto the hover colour.

This is the CSS

a { color: #0C8CD1;
     -webkit-transition: color ease-in-out 200ms;
     -moz-transition: color ease-in-out 200ms;
     transition: color ease-in-out 200ms;
}

a:hover { color: #AD28E8; }
a:visited { color: #91398B;}

Any ideas how to fix this?

Many thanks

2

Interesting bug but as both Firefox and chrome show the same effect I guess that’s the way its been implemented.

I couldn’t see any workarounds either at the moment.

3

Ah ok, thanks for looking into it Paul.

4

Transitions are REALLY annoying in that respect, as I’ve yet to get anything resembling the behavior I want out of them – try positioning for example, where the reflow of CSS being applied animates them into place ONLOAD – the last thing you’d want in a transition.

They’re a great idea, unfortunately they’re ridiculously buggy to the point I wouldn’t even TRY to deploy them yet.