This is a bug in IE. It's due to the poor implementation of ClearText. If the text is on a solid colour you can set the DIV containing the text to the same background color as what's behind it and that will clear it up.
If you're on top of a photo or gradient, you're out of luck. Another free gift from the folks at Microsoft. On Jan 5, 11:06 am, bflanagan <[email protected]> wrote: > Hey all- > > I know this has been covered before, but all of he fixes I've found > don't seem to be working for me. OF course the issue is with IE... > > I'm implementing a simple fadeIn/fadeOut using prototype's > setOpacity. In IE7, the text changes format during the fades. One > fix I've seen is to apply a background color to the container div, but > that's not having an impact on my end. I tried using the > script.aculo.us lib as well, but the results were the same. I also > tried adding a container div with a background color set and animating > it, but I'm still getting the crappy jagged text effect. > > Any ideas how to fix this? > > Here's the code: > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> > <html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en"> > <head> > <title>Test</title> > <script type="text/javascript" src="js/prototype.js"></script> > <style type="text/css"> > #mainWindow {background-color:#FFFFFF;} > </style> > <script type="text/javascript"> > Element.addMethods({ > fadeOut: function(obj){ > obj.setOpacity(1.0); > var currentOpacity = 1.0; > > var temp = setInterval(function(){ > currentOpacity -= .1; > obj.setOpacity(currentOpacity); > > if (currentOpacity <=0){ > obj.setOpacity(0.0); > clearTimeout(temp); > } > },40); > }, > > fadeIn: function(obj){ > obj.setOpacity(0.0); > var currentOpacity = 0.0; > > var temp = setInterval(function(){ > currentOpacity += .1; > obj.setOpacity(currentOpacity); > > if(currentOpacity >= 1.0){ > obj.setOpacity(1.0); > clearTimeout(temp); > } > },40); > } > }); > > function test(){ > $('mainWindow').fadeOut(); > setTimeout(function(){ > $('mainWindow').innerHTML = 'Updated content'; > $('mainWindow').fadeIn(); > },500); > } > </script> > </head> > <body> > <input type="button" value="click" onclick="test();" /> > <div id="mainWindow">Some wonderful content</div> > </body> > </html> --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~----------~----~----~----~------~----~------~--~---
