ClearType bug

JavaScript
1

Hello

I was wondering if anyone could help me out with a little problem I’m having in IE!

I think there is a ClearType bug going on making the text in IE go like the image on the right after a couple of seconds (looks ok initially)

I found this page to help fix it… but I don’t know which element is being targeted or where to put this script. I’m a newbie to Javascript.

The site I’m working on is here I’m using the Moleskin Notebook Jquery thing and that works ok in IE, so I think it is something that I have done!

If anyone could help me out with this or point me in the right direction it would be much appreciated.
thanks in advance :slight_smile:

2

I think this particular bug can be attributed to the opacity that is applied to elements with a class of “b-page”. The opacity is probably applied through some fading mechanism.

What happens is that jQuery works out that the actual opacity property doesn’t work in Internet Explorer 8 and below and instead applies a filter property. Sadly, any elements that have the filter property set on it, don’t receive Cleartype. (The CSS filter property is a DirectX filter that gets applied, which apparently doesn’t play too well with Cleartype)

There is a hack for this that can fix the Cleartype problem, but you might need to dive in to the plugin to fix it.

When the fading finishes, you can simply remove the filter property and IE will once again show the text with Cleartype.

For example:


$("#yourelement").fadeToggle(function() {
    $(this).get(0).style.removeAttribute("filter");
});

This will perform a fade (and toggle depending on the current state), when the fade finishes it will remove the filter property.

A lot of the jQuery animation functions will be able to take a callback function so that you can execute code when the animation finishes.

e.g.


$("#yourelement").fadeIn(300, function() {
  //this gets executed after "#yourelement" fades in (which will take 300ms)
});


$("#yourelement").fadeOut(function() {
  //this gets executed after "#yourelement" fades out
});
3

Arh you absolute star! That is really helpful - thanks.

You’ve explained it really well - THANK YOU!!