Internet Explorer CSS property “filter” ignores overflow:visible

Question

Apparently Internet Explorer (up to version 8 at least) ignores overflow:visible when applying filter (e.g. for opacity), causing anything outside the filtered element to be clipped as if overflow:hidden were used.

Are there any workarounds to this behavior ?

The sample code below shows how child is clipped by container – only its right and bottom borders are visible.

 <style type="text/css">
  #container {
   position:absolute;
   left:100px;
   top:100px;
   width:100px;
   height:100px;
   border:1px solid black;
   filter:alpha(opacity=50);
   overflow:visible;
  }

  #child {
   position:relative;
   left:-10px;
   top:-10px;
   width:20px;
   height:20px;
   border:1px solid red;
  }
 </style>

 <div id="container">
  <div id="child"></div>
 </div>

Answer 1

It seems that the workaround to this is simple: Use -ms-filter rather than filter:

-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=50)';

Answer 2

First, one interesting note: IE9 seems to correctly honor overflow:visible, even when emulating IE8.

Second, one general workaround to this issue would be to make your #container and #child siblings of one another inside of a common parent. The common parent would have no filter (meaning overflow will function correctly), and you would apply the filter you need to #container.

Because #child is no longer really a child of container, however, it will not receive your filter. This may or may not be a problem, and one possible solution is to apply the same filter to #child as well. I say this is a "possible solution" because applying the filter to the two elements independently, then composing them may or may not be identical to composing the elements first, then applying the filter to that composition. It depends what the filter is, and on whether or not the elements overlap. Even if it is not identical, it might be "close enough."

Finally, if your page has a doctype that puts it into standards mode (instead of the quirks mode to which IE defaults when there is no doctype), you may notice that filters do not apply to child elements unless the child has position:static (the default when no position is specified). Specifying either position:absolute or position:relative on the child will cause the filter on the parent not to apply to the child. Generally, this is a bad thing, but a side effect is that it will cause overflow:visible to work correctly.

If you adopt this solution, you will have the same problem that you may need to apply the filter to the child element as well.