views:

36

answers:

1

I'm trying to pulsate some text using JQuery, which gives some jagged edges when using Firefox, I tried to isolate the problem, and it happens when I change the text color to red using CSS. It seems as if there are bits of black left. Works ok in other browsers, even IE, so I'm a bit confused now. Here's the code:

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"&gt;&lt;/script&gt;
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"&gt;&lt;/script&gt;
 <script>
  $(document).ready(function() {
    $(".blink").effect("pulsate", { times:100 }, 2000);         
  });
  </script> 
</head>
  <body>
    <div class="blink">
        <p style="color:red;">The text to be pulsated</p>
    </div>
  </body>
A: 

After looking at cdutson's comment, I did some quick research. Looks like IE uses "ClearType" by default, whereas other applications like Firefox use your system settings. Open up your Windows' display settings and select "Advanced" and you'll see a setting for "effects." Change that setting to ClearType and you'll have nicer looking fonts system-wide, including in FF.

I had ClearType enabled when I tested your problem and could still see a little blackening around the red text when pulsating, but it wasn't as bad as when I retried the example with ClearType off. So that may help you.

On the other hand, you have to understand that it will still look bad for those users who do not have ClearType enabled.

Stephen
Thanks for the help, ClearType definately has something to do with it, when I turned it off completely in Win7 the animation was ok. Everything else looked worse though. So basically this seems like a Firefox bug, since IE, Chrome and Opera render the animation ok on the same pc.
Rene