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

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 w开发者_StackOverflowould be greatly appreciated.

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.)

You could try using an IE css 3 html component, like PIE (http://css3pie.com,) which does a fairly decent job of rendering gradients. (Though this is essentially using javascript)

Wrap the content with a DIV then add this to the DIV's css style...

position: relative;

http://cookbooks.adobe.com/post_IE8_clearType_fix_when_using_filters-16676.html

I had a situation where I wanted backgrounds of text areas to be certain colours fading horizontally to white and defined by hexadecimal in the CSS. I wanted to avoid making colour background images in case a non-developer member of my company wanted to add a new colour with hexadecimal only.

The solution I found was to make a 24-bit PNG of white gradienting into transparent set to the width of the area I was making.

I then used this IE-only hack to get the CSS to render a background colour of my choice that fades to white:

background /*\**/: #CCCED4 url('/white_to_transparent.png') repeat-y top left\9;

(the hack could be improved, but it works for me, including IE9)

I found another inexpensive (bit opaque) solution. The text becomes anti-alised back again, when wrapping the text node and setting each element to relative position. Do not ask why...

Lets assume:

<html>
<head>
  <title>IE8 filter problem causing jagged fonts</title>
  <style>
    html, body, div, span, b, i, ul, li, h1, h2, h3 ... to be continued {
      position: relative;
    }
    .gradient {
      filter:
        progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#e6e6e6');
    }
  </style>
</head>
<body>
  <div class="gradient">
    <div>I am wrapped, therefore not jagged</div>
  </div>
</body>
</html>

Hope that helps anyone out there. In this case it's not necessary to use background images or derivates.

Working example in jsfiddle: http://jsfiddle.net/SLZpE/2/

This may not count as elegant (or working) solution, but how about using Cufón for IE?

Yes, that's a problem with IEx.

Try using a solid background color:

/*replace #ccc with the color you want*/
background: url(images/gradient-image.png) top repeat-x #ccc 

Now, no need to use the expression "...stuffing a repeating background image", since there's nothing wrong with using a background image and repeat it, we should be thankful that we can not only do that, but we can repeat it in X and Y.

Of course, you want to make your repeating background image as efficient as possible, so make it small/thin (depending on your design) and use it, rest assured, you are not doing anything wrong or against any standards or best practices.