Text aliasing issues on transitions and other effects

I was having issues on multiple projects where the the aliasing of text when a transition would take place would cause the aliasing of text to go from subpixel to antialiased for a split second then return to subpixel.

The issue would happen to text not even connected to the effected elements. It was atrocious, but after some buggering around I found a few solutions.

There are two fixes to this:

1. Set your troubled text to be antialiased :

-webkit-font-smoothing: antialiased;

You'll see here http://maxvoltar.com/sandbox/fontsmoothing/
an example of how the different alias types effect your text.

What you should know

This obviously only works for -webkit-. As well your type will be much thinner and you'll want to increase your font weight a size. But then on -moz- your font-weight will be thicker than desired.

2. Set your effected element's z-index above all text.
For some reason z-index comes into play with this issue. It seems if the effected element is beneath text via z-index it causes the text to reevaluate its alias.

.troubled-text p {
     position: relative;
     z-index: 100
}
.effected-element {
    position: relative;
    z-index: 200
}

So if adjusting the z-index won't destruct the design of your site increase the z-index. and wallah.

My Thoughts

I would always suggest option 2, as I don't like hacking code for multiple browsers. Though in certain places Option 1 may be your only option.

Any Questions, just ask away.