Google Chrome Text Opacity

Came across a very strange bug today when checking out a website in Google Chrome.

White copy on a black background was not appearing, I could select the text and could also see it in Chrome’s Element Inspector.

I changed the color to ‘yellow’ from ‘#fff’ in the Inspector and suddenly the copy appeared but it was far from yellow, more like a gold colour, it was almost blurred too – it seemed like there was something going on with opacity on the text.

I quickly added ‘opacity: 1;’ to the document but no change, so I thought maybe it was to do with the font; I had got ‘-webkit-font-smoothing: antialiased;’ enabled, was it that? No, instead I tried ‘text-rendering: auto;’ and BOOM the font was now appearing in the solid yellow colour.

It would seem that this is a bug with Chrome and seems to happen (or at least in my case) when you are using any webkit transitions on the site, it only appeared on random spans, but also appeared on a module which I was flipping with webkit.

Hope this helps others out!