CSS gradients in IE7 & IE8 is causing text to become aliased

Question

I'm attempting to use a CSS gradient in a div containing some text. With Gecko and Webkit, the text displays fine. In IE7 & IE8 the text appears aliased (jaggy).

I came across this blog stating: "we decided to disable ClearType on elements that use any DXTransform".

IE Blog: http://blogs.msdn.com/ie/archive/2006/08/31/730887.aspx

That was back in 2006; 3.5 years later, I assume this bug would be fixed, but it's not. Is there a way to do this in IE8 without resorting to stuffing a repeating background image in the div?

Here's an example of what I mean.

<style>
    div
    {    height:     50px; 
         background: -moz-linear-gradient(top, #fff, #ddd);
         background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
         filter:     progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff, endColorstr=#ffdddddd);
    }
</style>

<div>Hello World</div>
<p>Normal text</p>

In IE, the text in the div is aliased (jaggy), and the text in the paragraph is not.

Any solution that doesn't involve images would be greatly appreciated.

Answer 1

There's no good solution to this problem.

Worse yet: progid:DXImageTransform.Microsoft.gradient is horribly buggy so mouse events (hover, click, etc.) pass right trough it - a click on such an element also triggers a seperate click on whichever element that happens to be positions behind it. Beware!

Regardless, you better start considering which fallbacks/workarounds/NastyHacks feel acceptable to you.

Here are a few ideas off the top of my mind - in order of my personal preference:

1. Just fall-back to a plain solid background-color in IE and move on with your life. (Be sure to place that background rule first for it to be safely overridden/ignored by FF and Webkit.)

2. Use a background-image in IE. (Again place that CSS rule at first)

3. Keep using the gradient hack and simply 'suck it up' and accept the jaggy text for IE.

4. use Javascript (or IE's proprietary CSS expression() syntax) to inject an empty element, apply the gradient to it and place it behind the text.

   div {
     background: -moz-linear-gradient(top, #fff, #ddd);
     background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
     behaviour: expression( jQuery(this).wrapInner('<div class="ie-wrap"/>').prepend('<div class="ie-gradient"/>'); this.runtimeStyle.behaviour='none'); /* disable repeat runs */
     position: relative;
   }
   div div.ie-wrap {
     position: relative;
   }
   div div.ie-gradient {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: expression( this.runtimeStyle.height=this.parentNode.clientHeight+"px" );
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff, endColorstr=#ffdddddd);
   }
   

   (Warning: above code is untested pile of crap. and will probably not work as is.)

5. Keep using the gradient hack and use Cufon to replace the jaggy text with VML rendered text. (Rests on the assumption that your site is using a typeface that allows font-embedding.)