The Industry

Transparency and Opacity and Internet Explorer/IE 8 is still Broken

As you can find out elsewhere, Microsoft changed the way their browser supports transparency [after throwing it out completely for awhile. Why do I get the feeling that there are not a lot of people in the IE group there who write web apps?].

So now they are both incompatible with everyone else, and themselves. Specifically, in CSS,

filter: alpha(opacity=50);

becomes

-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;

and someone posted that they even got:

*filter: Alpha(Opacity=50)

to work for IE 8.

OK, fine.

But what you can’t seem to find elsewhere is that, even with code to compensate for this gratuitous FU to the internet community, opacity still doesn’t work the way it is supposed to on IE 8.

Whereas for everyone else, including IE5-7, opacity sets the transparency for the target element AND ALL ITS CHILD ELEMENTS the -ms-filter just sets it on the target element.

For example, if you have an image in a div, and the div has 50% opacity? The image is rendered with 100% opacity.

Even though this bug is an interesting feature, and we went to some lengths to put a feature like this into magazines.me, this is still what I would call broken. At this time we do not plan on supporting this bug, and a few pages in the magazines will be unreadable [those with text over partially transparent backgrounds] and it will either just encourage people to switch to a browser that works or switch to IE7 compatibility mode.

[We are in the process of upgrading the magazine software to better support IE. IE is about 3 times slower than FireFox and Chrome - which are tied - with respect to executing a ton of DOM-centered JavaScript. More on performance in the next post]