1

I am getting a weird text issue in IE caused by my JavaScript.

I tried to paste the JavaScript here but it won't format right so instead I dropped it here: http://pastebin.me/5201856c0083c61e67f40bd19914241f

I included a screen grab below. Anyone know how to fix this for IE?

enter image description here

Bms85smB
  • 43
  • 3
  • 1
    possible duplicate of [jQuery fadeIn leaves text not anti-aliased in IE7](http://stackoverflow.com/questions/778208/jquery-fadein-leaves-text-not-anti-aliased-in-ie7) — the second answer there looks good. – Paul D. Waite Mar 16 '11 at 19:35
  • Also http://stackoverflow.com/questions/457929/jquery-toggle-function-rendering-weird-text-in-ie-losing-cleartype and http://stackoverflow.com/questions/993354/why-does-the-jquery-pulsate-effect-leave-jagged-text-behind-in-ie – Paul D. Waite Mar 16 '11 at 19:37
  • See also this blog post: http://www.kevinleary.net/jquery-fadein-fadeout-problems-in-internet-explorer/ – Paul D. Waite Mar 16 '11 at 19:38
  • Thanks for the help everyone. Sorry for the duplicate. I searched for it first and couldn't find it. However, Unfortunately I don;t know enough about JavaScript yet to implement the fix in the second answer. – Bms85smB Mar 16 '11 at 19:57
  • #1 from the blog post on kevins blog did fix the issue, but doesn't really work as a solution because it requires a background color – Bms85smB Mar 16 '11 at 20:01
  • @Bms85smB: no worries at all — it’s one of those issues that can be phrased quite a few different ways, so it’s not always easy to find existing solutions. I’ll take a look at your code and try to explain how to implement a fix. – Paul D. Waite Mar 16 '11 at 20:23

2 Answers2

1

Try cleartype

http://malsup.com/jquery/cycle/cleartype.html

It removes the filter IE uses to fade text after it fully fades in.

Loktar
  • 34,764
  • 7
  • 90
  • 104
0

If setting a background colour isn’t an option, I think the solution is to remove the filter property of the faded element once the animation’s finished, via a callback function.

In your code, you could define a function that does this:

function fixIEFade() {
    if ( $.browser.msie ) {
        this.style.removeAttribute('filter');
    }
}

Then set it to be the callback in your calls to animate:

//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000, fixIEFade);
//Hide the current image
current.animate({opacity: 0.0}, 1000, fixIEFade).removeClass('show');

I think that should work?

Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
  • This shows promise but is giving me a strange issue. The first slide displayed (before any transition) still looks pixilated. Every slide after looks good, but they are stacked on top of each other, they fade out then re-appear and stay even after the next slide is added. – Bms85smB Mar 16 '11 at 21:51