How to ensure CSS opacity changes to text/links don't change the color value in Firefox/Windows?

Question

So I noticed that when I do an opacity change to a text or link element in Firefox (3.6+) on Windows, along with an opacity change, the color changes as well. For example, the blue text link shifts to a yellow just before it disappears.

Have a look at http://linowski.ca/experiments/onproximity/ and move to and from the text link named "some link".

Does anyone know a work around for this bug to make sure the color stays stable as the opacity is lowered down? (In Google Chrome the text fades out properly while retaining it's blue hue).

Any tips would be welcome. Jakub

Answer 1

It works OK for me in FF/Win 3.6.8

At first I thought I saw a yellow tinge but I think it was an optical illusion (colour retention on the retina may be - the negative colour after image - blue and yellow are opposites/complementary). I could also see the same (very very subtle) illusion in Chrome. But this is only if I stare at the blue text link before it fades; if I'm looking off the link I don't see it at all.

So, dare I say it, it's an optical illusion not a bug!

Answer 2

When ClearType is used, background-color needs to be applied to links for best results.