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;
}

  • Goran

    Thank you A LOT! 🙂

    It’s just that, faded div, doesn’t have to be absolutely positioned. It’s only background that matters…

    cheerz…

  • admin

    No problem dude. I hope that helped. And I added the position absolute because I noticed this happening in positioned elements
    guess you’re right…