Fade in/out effect makes text Garbled. /strange

Written by Alex Wolkov

Prologue :

Ok so i’m working on this site at work, and our creative designers decided it should have a news ticker in Javascipt. A fade-in/out kind of thing.

I used Mootools (of course) to write a simple script for this. And then I noticed something very strange. While in transition, both in Firefox and IE (6 and 7) the text got Garbled and rendered strangely.

Problem :

I then noticed this deal on another websites :

getstisfaction.com

getstisfaction.com


Preview :

I tried to recreate this , and I made it happen only in IE for some reason.

FIX :

All that needs to be done, is to add background color to the absolute positioned elements that get faded in and out…

like so :

.fade_div{
position:absolute;
background-color:#fff;
}