administration mode
Pssst...Ferdy is the creator of JungleDragon, an awesome wildlife community. Visit JungleDragon

 

Transparency hell...how IE once again ruins the web »

FERDY CHRISTANT - FEB 12, 2009 (03:35:20 PM)

Here's another Microsoft web accomplishment: 

When it comes down to creating alpha transparent elements on the web, there are two ways to do this:

1. The CSS way

For modern browsers, this bit of CSS will render the element #myblock with a transparency of 50%:

#myblock {
filter:alpha(opacity=50);
opacity: 0.5;
-moz-opacity:0.5;
}

The official attribute to use is "opacity", the others are browser-specific because "opacity" is not supported by all browsers. It's a bit hackish to put all three in, but it is needed for now. Furthermore, this hack will continue to work in the future once opacity is used by all.

Note: the above will work for IE7, but not IE6. IE 6, as always, requires an entirely different hack.

2. Using PNG images

The CSS way is great to create transparent surfaces on your web page, where every part of the surface has the same opacity. If you need something more complex though, PNG images are the way to go. I remember when IE7 launched how the product team demonstrated the excellent PNG support of IE7. Fast forward to reality:

See image. It consists of a solid red square with a solid yellow square PNG image on top, with an opacity of 50%. Firefox renders it correctly, as it does most of the time. IE7 screws it up royally, as it does most of the time. The issue is caused by IE7's handling of gamma correction, a header that is/can be part of a PNG image. Gamma correction is meant to provide consistent colors on all monitors. As you can see, IE7 accomplished the exact opposite. You can remove the gamma correction header from your PNG image using this tool. It will now render as yellow. But not the same yellow on all monitors, since we deleted the gamma correction values. Sigh.

I thought I could not be dissapointed again by IE, my expectations are that low. IE6 has costs me so many hours of my life that I'm not even intending to support it anymore. I give up. IE7, however, gave me some hope. Now, here we are again. A crucial feature will not be robustly available for the next 5 years, because that is how long we will have to support this piece of shit.

I do not see the example above as an incident. I would not be surprised if the total cost of lost productivity due to IE bugs could run into the billions each year. When will Microsoft learn the web?

Comments: 6

COMMENT: MARK BARTON emailhomepage

FEB 12, 2009 - 16:50:42

comment » Ferdy,

Is it any better in IE8?

Mark «

COMMENT: MARK HALLER emailhomepage

FEB 12, 2009 - 17:00:39

comment » Nice one IE. Great work. Never knew about the gamma correction bit, Ferdy - sweet.

Mark - IE8 even broke Kiss 100 radio station. A lot of the site, including "listen live" is broken unless you render in "compatibility mode" - it's gonna get worse before it gets better I think!

Mark «

COMMENT: TOMMY VALAND emailhomepage

FEB 12, 2009 - 05:18:26 PM

comment » @Ferdy: "filter:alpha(opacity=50);" works in my IE6..

(Note: the above will work for IE7, but not IE6. IE 6, as always, requires an entirely different hack.)

Also.. Why the non-standard "-moz-opacity:0.5;"? opacity was included in Firefox 0.9..

https://developer.mozilla.org/en/CSS/opacity «

COMMENT: FERDY

FEB 12, 2009 - 06:18:31 PM

comment » @Tommy,

You're right, with "IE 6 requires an entirely different hack" I meant PNG support for IE6, not CSS support.

moz-opacity is needed for non-Firefox Mozilla browsers, note that Firefox is not the only Mozilla browser. «

COMMENT: TOMMY VALAND emailhomepage

FEB 12, 2009 - 06:49:15 PM

comment » Understood.. I have the "luxury" of only needing to support IE6/7, the current version of Opera, Firefox and Safari..

I don't envy you if you need to make your sites compatible with even more browsers.. :) «

COMMENT: TREVOR GERZEN emailhomepage

FEB 19, 2009 - 07:10:34 PM

comment » I haven't had any problems in IE 7 when I save for web with Photoshop. If you read this article these guys explain a mystery that was killing me for a long time

http://www.viget.com/inspire/the-mysterious-save-for-web-color-shift/

I am also using Drew Diller's transparent png fix for IE 6 which uses VML instead of filters since MSFT couldn't even make their own stuff work consistently

http://www.dillerdesign.com/experiment/DD_belatedPNG/#examples «

RATE THIS CONTENT (OPTIONAL)
Was this document useful to you?
 
rating Awesome
rating Good
rating Average
rating Poor
rating Useless
CREATE A NEW COMMENT
required field
required field HTML is not allowed. Hyperlinks will automatically be converted.