IE Opacity filter decreases text quality.

Atli

Hi everybody.

I have a JavaScript function that is meant to fade in a HTML element.
To do this I use the standard "opacity" style, plus the non-standard IE "filter: alpha" monstrosity.

This all works, except when the element contains text. In that case, IE appears to go all... well, IE on me, and starts rendering the text all funky.

I made an example of this here.
If you run this in any browser except IE, the two blocks of text will look identical after the left block has faded in. But, IE will render the left block at a totally different level of quality than the right one.

I've done some Googling on this and as I understand it, the filter monstrosity that IE uses is a DirectX thing, which apparently doesn't play well with the ClearType font rendering software that IE uses to render fonts. And in all it's wisdom, to fix the problem, Microsoft simply disables ClearType on the element that uses the filter.

I'm not sure if the type of monitor you use will affect how badly this problem affects you, but I suspect it might be less visible on the old "tube" monitors.

So... my question to you good people is; do you know any way around this problem?

My only idea so far is to simply place a white element on top of the text element and fade that out, but that would be a bit to limiting for any proper use.

O, btw. I have tested this in IE versions 6, 7 and 8 in XP and Vista. All do the same thing.

Thanks for your time.
- Atli Þór

numberwhun

I see what you are talking about. The original, right hand column seems to be of a heavier, almost bolded text than the left hand, faded in normal text.

Can you paste your code here (both html and javascript) so that we can see what you have done thus far? We will see if we can help from there.

Regards,

Jeff

Atli

Sure.
This is the HTML: (well, XHTML, but it doesn't really matter)

Expand|Select|Wrap|Line Numbers

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

    <head> 

        <title>Fade test</title> 

        <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> 

        <script type="text/javascript"> 

            // Pasted this separately below.

        </script> 

        <style type="text/css"> 

            #container { width: 600px; }

            #fademe { width: 300px; float: left; filter: alpha(opacity=0); opacity:.0; }

            #static { width: 300px; float: right; }

        </style> 

    </head> 

    <body> 

        <button onclick="javascript: doFade(document.getElementById('fademe'));">Fade in</button> 

        <div id="container"> 

            <p id="fademe"> 

                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam semper. Ut a neque. Praesent faucibus consequat nisi. Suspendisse porta lacus. Nullam blandit faucibus libero. In hac habitasse platea dictumst. Quisque urna sapien, posuere vel, sagittis et, sollicitudin sit amet, libero. Donec vitae purus quis nunc lobortis cursus. Nam eget est quis mi vestibulum egestas. Nam nec sem. Etiam sodales sagittis eros. Integer mollis odio nec nisl. Suspendisse potenti. Sed laoreet dapibus sem. Morbi non mi. Etiam luctus accumsan neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi nisi ipsum, sagittis dapibus, rutrum venenatis, euismod in, risus.

            </p> 

            <p id="static"> 

                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam semper. Ut a neque. Praesent faucibus consequat nisi. Suspendisse porta lacus. Nullam blandit faucibus libero. In hac habitasse platea dictumst. Quisque urna sapien, posuere vel, sagittis et, sollicitudin sit amet, libero. Donec vitae purus quis nunc lobortis cursus. Nam eget est quis mi vestibulum egestas. Nam nec sem. Etiam sodales sagittis eros. Integer mollis odio nec nisl. Suspendisse potenti. Sed laoreet dapibus sem. Morbi non mi. Etiam luctus accumsan neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi nisi ipsum, sagittis dapibus, rutrum venenatis, euismod in, risus.

            </p> 

        </div> 

    </body> 

</html>

And the Javascript

Expand|Select|Wrap|Line Numbers

 
function doFade(pElement, pCurrent) 

{

    if(pCurrent >= 1) {

        return;

    }

    else {

        if(typeof pCurrent != "number") {

            pCurrent = 0;

        }

        else {

            pCurrent += 0.05;

        }

        pElement.style.opacity = pCurrent;

        pElement.style.filter = "alpha(opacity:" + Math.ceil(pCurrent * 100) + ")";

        window.setTimeout(function() {

            doFade(pElement, pCurrent);

        }, 25);

    }

}

One thing I noticed as well when testing in IE8 (Beta 2). All the other IE versions and the standard compliant browsers correctly load the left paragraph totally transparent. IE8, however, loads it totally opaque.

Thanks.

David Laakso

Dunno. Big issue for sure. Does workaround#2 near the bottom of that page offer a glimmer of hope?

Atli

Thanks David, that was very helpful.

The second workaround he shows is what I was originally going to try, but I found it a bit limiting. It would only work on text that has a solid background. I might try it out a bit tho.

But, the first workaround was interesting. I don't mind the text being all fuzzy during the transition as long as it is rendered correctly afterwards. (People that use IE probably won't notice nor care, and if they do, maybe they shouldn't be using IE in the first place :P)

Simply removing the filter attribute after the fade does exactly that.

I changed my example page, so you can check it out.
And this is my updated javascript:

Expand|Select|Wrap|Line Numbers

 
function doFade(pElement, pCurrent) 

{

    if(pCurrent >= 1) {

        if(pElement.filters) {

            pElement.style.removeAttribute('filter');

        }

        return;

    }

    else {

        if(typeof pCurrent != 'number') { pCurrent = 0; }

        else { pCurrent += 0.05; }
 
        if(pElement.filters) {

            pElement.style.filter = 'alpha(opacity:' + Math.ceil(pCurrent * 100) + ')';

        }

        else {

            pElement.style.opacity = pCurrent;

        }
 
        window.setTimeout(function() {

            doFade(pElement, pCurrent);

        }, 25);

    }

}

I also changed the CSS. The Initial filter settings on the fade paragraph was causing it to revert back to being invisible after the filter was removed by the doFade function.

Expand|Select|Wrap|Line Numbers

 
<style type="text/css">

    #container     { width: 600px; }

    #fademe     { width: 300px; float: left; }

    #static        { width: 300px; float: right; }

</style>

It's far from perfect but, well, that's what people get for using a broken browser :)

Anyways. Thanks for the help guys!

David Laakso

Quote:

I changed my example page, so you can check it out.

It is definitely doing much better in IE/7.0 now (no IE/8 on this end at the moment).

Atli

I've tried it in IE8 (beta 2) and it seems to be identical to IE7.

I also applied this solution to a larger project I have been developing locally and it seems to work fine here to. Although, having multiple elements fading at the same time slows IE down considerably.
I'm currently working with 5 elements fading at the same time and IE is all jittery and slow while Firefox and Chrome play it smoothly.

And the worst thing is that when IE goes jittery the entire OS does to.

IE Opacity filter decreases text quality.

re: IE Opacity filter decreases text quality.

re: IE Opacity filter decreases text quality.

re: IE Opacity filter decreases text quality.

re: IE Opacity filter decreases text quality.

re: IE Opacity filter decreases text quality.

re: IE Opacity filter decreases text quality.

Similar HTML / CSS bytes

/bytes/development

/bytes/it

/bytes/about