Planet CakePHP

I think I have a knack for discovering weird edge cases but here was a wacky one that had me scratching my head for awhile. In working on some interface development, I wanted to have an element with fixed positioning, locking it to the viewport. In this particular case, it quickly animates in by adjusting the opacity of the element from 0 to 100. Straightforward enough, right?
But in Internet Explorer 7 and 8 (even in standards mode), I wasn't able to scroll and while I could type in my form inputs, nothing was showing up. Resizing the browser forced a redraw and everything looked okay but you still couldn't scroll or see anything you typed into a text field.
Here is the CSS that was causing all the ruckus:
.fixed {
position:fixed;
filter: alpha(opacity=100);
top:15px; right:15px; bottom:15px;
width:150px;
overflow:auto;
}
I've put together a simplified test case that demonstrates this. Check it out in IE7 or 8 and you should see the unfortunate side-effect. Click on the Remove Filter button and the functionality of the fixed area should return to normal.
Putting the test case together for this was a hassle. Because the filter was being applied via script, all my original assumptions weren't working. It was only when I started pasting in rendered HTML from IE (using IE's developer toolbar in IE8) that I was able to recreate the issue (since the rendered HTML had the filter applied).