SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: ClearType bug

  1. #1
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    ClearType bug

    Hello

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

    text-change.jpg

    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

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code javascript:
    $("#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.
    Code javascript:
    $("#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
    });
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Arh you absolute star! That is really helpful - thanks.

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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •