Grow your CSS skills. Land your dream job.

IE8 Transparency Issues

  • # November 27, 2012 at 11:09 am

    I am currently working on an site, that uses jQuery to fade in and fade out images when certain actions are made.

    However in ie8, when the images fade in, they appear black at first.

    What is cause this issue? and how can i fix it?

    # November 27, 2012 at 11:12 am

    Do you have a link?

    # November 27, 2012 at 11:13 am

    I think it will depend on how the opacity is being coded and added, I believe IE8 doesn’t support the rgba property, so something like this;

    background: rgba(0,0,0,0.5);

    Will not be supported, however when you code it like this;

    background: black;
    opacity: 0.5;

    It will work, but it adds an overlay to the whole element, so if you had text on the image also, it would make that darker too.

    # November 27, 2012 at 12:28 pm

    hi @kpiatak,

    This happens when you try to fadeIn or fadeOut a PNG image..
    IE 7/8 is very bad in handling PNG transparency. (IE 6 ‘was’ the worst!)

    Either use GIF images or you can try: iepngfix.htc found at:
    http://www.twinhelix.com/css/iepngfix/

    Let us know if that helps.

    thanks.

    # November 28, 2012 at 9:54 am

    @Paulie_D

    Here is a link:

    http://webapps.easy2.com/ce/ext1108/iris_alarm.html

    The problem happens in IE8 on Windows 7.

    # November 28, 2012 at 12:21 pm

    I checked the link out in BrowserStack (Windows 7, IE 8) and I didn’t see it going black. Weird. If it’s a huge problem, maybe you could make the images both big JPG’s (instead of PNGs as smaller parts) and transition the entire image.

    # November 28, 2012 at 1:25 pm

    I’ve often had problems where transparency in IE7/8 caused problems if the wrapping div of the elements in question did not have a background color.

    Example: text that fades, or had a specific opacity value wouldn’t look smooth, unless I would give the element that contained the text an actual background color.

    Worth a try, although I realize that might be difficult with your design.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".