Please no. Just, no. I mean, honestly, how far can IE sink? I really hope I am wrong here, but…
If you check my test case, you may notice that it looks different in Internet Explorer than it does in sane browsers. What is the culprit?
Simple: filter:alpha.
Supposedly, making elements somewhat transparent is possible in everyone’s favorite browser. Well, it is, but you have to use Microsoft’s proprietary “filter” CSS property.
Okay, fine, at least it works. Except in one case, from what I can tell: it will not apply transparency to absolutely positioned child elements of the element with the “filter” property set.
Why is this an issue? Let’s take the simple example of a button control (specifically, SproutCore’s SC.Button, but it should apply to other button controls as well): you have a left part (with nice rounded corners), a center part (that can be stretched), and a right part (again with the rounded corners). One part—for instance, the right part—is either positioned relatively or is the parent element itself, and simply has a background-position:right. The left and center parts, however, are positioned absolutely; something like left: 10; right: 10 for the center part; right:0; width:10; for the right part (I just made these numbers up! They aren’t real!)
So, what happens if you try to fade the button out in Internet Explorer? Well, it looks really odd. In the above example, the right part fades out, but the left and center do not. They just stay as they were.
There is only one workaround that I know of: seting filter:alpha on every element. There are a few problems with this:
- Performance. Each setting of “opacity” will have to recursively loop through all child elements.
- Performance * Animation fps. Yep, animating opacity in IE is plain screwed.
- Pure messiness.
- Long-term issues: what about when (if) Microsoft fixes the issue?
Don’t you just love Internet Explorer?
I keep thinking I must be wrong, and there must be some nice little workaround, CSS hack, or even the simple explanation of me just being plain wrong (I actually hope I am).
Anyone know?
You can apply the filter property to all sub elements by using the star (*) operator. For example if you have a div and you want to apply a CSS property to all tags in it you can just do
div * {foo}
In your case though you would probably want to set it up as “all the tags in a tag that has a certain class name”, i.e. .filterAll * {filter:alpha….}
Then just apply that className to the item in question.
To the best of my knowledge, the star operator is supported by all major browsers.
I hope this helps.
position:absolute is interpreted in IE as the child element being pulled out of the context of the parent element which means child elements with position:absolute will not inherit all of the css properties you would expect them to.