I dug into this a little. It's potentially related to the size of the mask, which implies it may vary across machines with differing resources.

For example, if you reduce the dimensions of the page (reduce the size of the document, not the window or viewport) on which you see the problem, it'll eventually end up being transparent again past a certain size threshold. Also to test this theory, try the release notes on this page and see if you have the same problem: http://developer.yahoo.com/yui/swf/

It appears to be a bug with IE's filter implementation. Will look into it further. Can you please post the detailed IE version number you see the problem on. The machine I *wasn't* able to reproduce it one was running IE 8.0.6001.18697IC, Win XP/SP2. However I did see the issue on a machine at home (which I don't have the version for currently).

So, back home,

a). Tested on 8.0.6001.18702, Win XP/SP2, and the mask renders correctly on http://developer.yahoo.com/yui/container release notes.
b). However the mask is opaque on 8.0.6001.18828, Vista on the container url, but not on the http://developer.yahoo.com/yui/swf release notes page.

My test results are as follows (tested on two machines both of which run Vista SP2 x86 with IE 8.0.6001.18828):

Machine 1:
http://developer.yahoo.com/yui/container: Opaque
http://developer.yahoo.com/yui/swf: Transparent

Machine 2:
http://developer.yahoo.com/yui/container: Opaque
http://developer.yahoo.com/yui/swf: Opaque

Odd. Machine 1 is a desktop machine, machine 2 is a laptop. Both are Intel CPU based and utilize ATI GPUs.

I have no idea what is causing these differences.

IE 8.0.6001.18828 seems to be the version with problems.

The only deviance in it's set of results seems to be the "Machine 2: swf : Opaque" finding, but that maybe either border line (that is, if the page was just a little bit bigger, you'd hit it on Machine 1 also), or something else on Machine 2 maybe impacting graphics resources [ resolution, something else configured for "quality" over "performance" ].

Otherwise 18828 has shown the problem consistently for a given element size.

The odd part to me is figuring out how 18828 gets on a machine.

I just tried upgrading a Win XP SP3 machine which had IE7, using the IE 8 download (non-MSN version) link on http://www.microsoft.com/windows/internet-explorer/default.aspx, and it installed 18702 (which doesn't have the problem)

Nevermind, just saw "Vista" on your results above. So, 18828 is probably the Vista build. So IE8 build 18828 on Vista has the problem, which doesn't surprise me given Vista's heavier graphic card requirements.

p.s. Let me know if you have a Win XP box which has the problem - otherwise pursuing the Vista option (looking for IE bug reports etc.)

My post on microsoft's support forums. Hope to get it into their bug DB.

http://www.microsoft.com/communities/newsgroups/list/en-us/default.aspx?dg=microsoft.public.internetexplorer.general&tid=f14d2f90-51bd-4545-a206-09fee2ea00a5&cat=en_us_28cca3eb-7037-4d4f-bde1-d8efee1f1420&lang=en&cr=us&sloc=&p=1

(If you have a chance, let me know what you see for the basic test URL in the above post, using your Vista IE8 install)

I tried the test page you mentioned and can confirm your findings so far are definitely correct. The div becomes opaque at 4000px on the desktop machine and at 2000px on my laptop.

If you'd like to take a stab at modifying the test page, I would be interested to know it fails at a specific "binary" px height or area [ 2048, 4096 etc. ]. Feel free to post back to the MS support URL.

The other test I wanted to do was using a non-ATI card [ my Vista installs all have ATI cards and I believe yours did too ]. If there's anyone out there who wants to give it a shot with IE8/Vista/Nvidia, that would be useful info.

The height values when the div becomes opaque on the test page on my two machines are: 2049 and up on laptop, 4097 and up on desktop. Lower values keep the div transparent.

How perfect is that. So it seems like an actual IE8/video card driver/Vista Graphics code logic bug (as opposed to a resource utilization bug). It hits a binary limit somewhere [ 2048 and 4096, probably depending on the graphics card and drivers ] and barfs.

Another reference to the same issue: http://social.msdn.microsoft.com/forums/en-US/iewebdevelopment/thread/29d0b0e7-4326-4b3e-823c-51420d4cf253/

Hi, I'm not sure if this helps but...

I found this same problem when I used a modal dialog (yui 2.8.0) in IE8 (not compatibility view) with document mode of 'IE8 Standards'.

The cause is that IE8 does not support the CSS3 'opacity' selector. But YUI uses this to style the mask as follows:

.yui-skin-sam .mask {
background-color:#000000;
opacity:0.25;
}

To solve this problem - I have an IE specific stylesheet in which I override the above style as follows:

.yui-skin-sam .mask{
filter: alpha(opacity=30);
}

Hope that might be of use to some people. I understand their is clearly still a problem with a large height - but for me that was not the cause of the problem.