text rendering is screwed with “gradient” on IE

StackOverflow https://stackoverflow.com/questions/9177728

Question

RGBA -- workaround for IE is “DXImageTransform.Microsoft.gradient".Found a handy tool provided by www.css3please.com for cross browser transparency,but applying this gradient on IE(IE8) -- works,but the text loses its clearness/legibility.

applying georgia to make the font look uniform on all the browsers,but the text does not appear properly after i apply gradient . Here's the JSFiddle http://jsfiddle.net/mvivekc/GJaDy

the code is--

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<html>
<style type="text/css">
.georgiaWithTransform{
    font-family: Georgia;
    height: 80px;
    width: 800px;
     font-family: "Georgia", Geneva  ;
    word-wrap:break-word;
      background-color: rgba(150, 150, 150, 0.3);  /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C969696,endColorstr=#4C969696); /* IE6–IE9 */
                zoom: 1;

 }
 .georgiaWithoutTransform{
    font-family: Georgia;
    margin-top: 30px;
    height: 80px;
    width: 800px;
     font-family: "Georgia", Geneva  ;
word-wrap:break-word;
  background-color: rgba(150, 150, 150, 0.3);  /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */

 }
</style>
<body>
<div class="georgiaWithTransform">Georgia does not appear properly with transformation in IE 8,and i do not understand why this is happening</div>
<div class="georgiaWithoutTransform">Georgia properly without transformation in IE 8,You can notice the difference in the appearance of the text here as compared to the top part( Noticeable only in IE)</div>
</body>
</html>

Cant understand why this is happening and badly need a workaround for this problem.

Here's a screen shot of the problem on IE8 -- enter image description here

Same happens on the fiddle as well.. problem is seen only on IE,not sure why..

Please help, Thanks in advance

Was it helpful?

Solution

I had a similar problem once with opacity filters in IE, the alternative that was suggested to me was using 2x2 image and background-repeat. In your case, you could try the same with a 1px width and the content height as height for your image with the desired gradient applied. This may not help you much but, here is the link to aforementioned question.

P.S : using an image as a workaround did work like a charm for me.

IE Filter Antialiasing problem

OTHER TIPS

Alright, that's what I thought was happening. The filter's turning off the anti-aliasing in the font. You can see a solution offered here. Biziclop created a small jQuery script you can use and has a sample of it working here. This will force the browser to fake the anti-aliasing.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top