Why does graphics have ugly black borders in IE after alpha animation?

Question

The site I'm working on opens with a fancy jQuery opacity animation. Currently It's working in all browsers, but in IE all text and alpha images are left with ugly black borders that makes the text practically unreadable.

Is there some clever javascript command i can run to refresh/update the graphics? Any other way to fix this?

My problem is entirely css and javascript related, so all source code can be found following the link.

Thanks for any help!

http://xistence.org/dev/

babtek · Accepted Answer · 2010-09-05T05:19:59.880

3

After an animation involving the opacity, you will want to clear the opacity value (back to a default of no value) to fix this mangled antialiasing in IE. Try this jQuery on the section in question after the animation is complete (e.g. in a callback):

$('.item').css('filter','');

edited Sep 05 '10 at 05:19

answered Aug 01 '10 at 03:39

babtek

934
5
6

1

So the animation sets the value to `1` in the `filter` internally fed to IE, and you simply just kill the `1` through `opacity, ''` so it becomes vanilla, untouched, and this will resolve the black glitch? – meder omuraliev Aug 01 '10 at 03:45
Resetting the opacity did nothing, but resetting the filter did the trick. Thanks for the reply! If you edit your post, I'll mark it as the correct answer. – Hubro Aug 01 '10 at 03:55

score 0 · Answer 2 · edited May 23 '17 at 12:07

0

This question probably has the answer you are looking for:

jquery cycle IE7 transparent png problem

from @darkoz's answer:

The way to get around this is to nest your png inside a container and then fade the container. Sort of like this:

<div id="fadeMe">
    <img src="transparent.png" alt="" />
</div>

edited May 23 '17 at 12:07

Community

1
1

answered Aug 01 '10 at 03:31

spender

117,338
33
229
351

score 0 · Answer 3 · answered Aug 01 '10 at 06:03

This snippet of jQuery code has served me well when dealing with opacity issues in IE.

    $(function() {
        if (jQuery.browser.msie)
            $('img[src$=.png]').each(function() {
            this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+this.src+",sizingMethod='scale')";
        });
    })

score 0 · Answer 4 · answered Jul 11 '11 at 05:05

Define a solid background color to your image:

    .container img {
         background-color: white;
    }

Define the background-image css property of your image to its src attribute:

    $('.holder-thumbs li a img').each(function() {
         $(this).css('background-image', $(this).attr('src'));
    });

Advantage: you don't need to change your markup

Disadvantage: sometimes applying a solid background color is not an acceptable solution. It normally is for me.

Why does graphics have ugly black borders in IE after alpha animation?

4 Answers4