jQuery FadeTo causing pixelated text in IE8 when font-weight: bold

Question

I am fading out, and in a div:

$('.formErrors').fadeTo('fast', 0); 
$('.formErrors').fadeTo('slow', 1);

But when I do this in IE 8, it seems this bit of CSS:

.formErrors li { font-weight: bold; }

Is causing the text to come back quite distorted: (image below)

http://www.newmania.com/images/error.jpg

The HTML I am applying this to is:

<div class="formErrors">
There are errors in your submission. Please fix the following and try again:
<ul><li>Action is empty</li></ul>
</div>

It works fine in Firefox. Any ideas please?

Answer 1

A common solution is to define a background color, if you don't already have an image:
http://jsbin.com/axapa

.formErrors {background-color:white;}

Another option is to use fadeIn and fadeOut: the animation is till ugly, but at least it ends up nicely: http://jsbin.com/aboxa