text rendering is screwed with "gradient" on IE

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

just wanted to add,this problem is not seen on FF/Chrome/safari.. only on ie.. — Vivek Chandra, Feb 06 '12 at 07:12
You might want to add a proper example of what is happening. ( http://jsfiddle.net ) — Joonas, Feb 06 '12 at 09:05
@lollero have updated the code to give you and others a better view of my problem,please check the fiddle in IE to see my problem(text rendering on applying a gradient) -- check the fiddle here.. http://jsfiddle.net/mvivekc/GJaDy/ .. any help is appreciated.. — Vivek Chandra, Feb 06 '12 at 09:43
The gradient in your fiddle is non-existent. You've specified the same color as your start and end color. Also, hex values should only have 6 characters, not 8. — Alex Morales, Feb 06 '12 at 13:32
@Alexmorales was trying to attain cross browser transparency,i.e.Rgba workaround for IE.. as mentioned in the link i'd also included( www.css3please.com ).. that's y there's no gradient.. and making the color a proper hex does not change anything -- the text still remains disturbed.. — Vivek Chandra, Feb 06 '12 at 17:50
That's strange because despite everything I had seen, the text looks fine for me in that fiddle. Could you include a screenshot? — Alex Morales, Feb 07 '12 at 12:37

score 0 · Accepted Answer · edited May 23 '17 at 12:13

0

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

edited May 23 '17 at 12:13

Community

1
1

answered Feb 06 '12 at 10:30

Ashwin Krishnamurthy

3,750
3
27
49

Thank you,i'll keep that as a last resort.. seems like using an image is the only workaround for every stupid IE problem.. – Vivek Chandra Feb 06 '12 at 10:45
Yeah i went through the same. If you do find a workaround, update! – Ashwin Krishnamurthy Feb 06 '12 at 10:51

score 0 · Answer 2 · edited May 23 '17 at 11:48

0

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.

edited May 23 '17 at 11:48

Community

1
1

answered Feb 07 '12 at 14:10

Alex Morales

1,166
9
13

checked the answer,using plain js.. is there a way i can wrap it with plain JS?? – Vivek Chandra Feb 07 '12 at 14:15
also,he mentions that its a v memory hungry method -- would you suggest using it??.. or,is there any other way to achieve the same?? – Vivek Chandra Feb 07 '12 at 14:17
To be honest, I wouldn't bother with trying to support rgba on IE. I would just make sure that it degrades gracefully and move on. I've managed to get clients and co-workers to understand that pages do not have to look identical in every browser. The only other solution I've seen would be the one Brutallus mentioned. Sorry I can't be of more help. – Alex Morales Feb 07 '12 at 15:02
thanks,searched -- found no articles.. guess this issue has no workaround.. accepting Brutallus's answer.. – Vivek Chandra Feb 07 '12 at 15:05

text rendering is screwed with "gradient" on IE

2 Answers2

Linked