Flash inside a scrolling div - IE6 bug

Question

I have div containing a list of flash objects. The list is long so I've set the div height to 400 and overflow to auto.

This works fine on FF but on IE6 only the first 5 flash objects that are visible work. The rest of the flash objects that are initially outside the viewable area are empty when I scroll down. The swfs are loaded ok because I don't get the "movie not loaded". They also seem to be embedded correctly they are just empty ie. the content is never drawn.

Any ideas on how to fix this?

ps. The html elements involved are mainly floating in case that has an impact on this. The flash objects are embedded using the popular swfObject.

EDIT: It seems that the bug only occurs with the flash plugin "WIN 8,0,24,0"

Since I cant post a link I'll summarize the relevant code here:

<div style="overflow:auto; height:400px; float:left;">
<div id="item_1" style="float:left; clear:left; height:100px;">
<!-- swfObject Embed here -->
</div>
...
<div id="item_7" style="float:left; clear:left; height:100px;">
<!-- swfObject Embed here -->
</div>
</div>

EDIT: After trying to recreate this problem in a separate page I found that the bug is some how related to the flash objects being hidden initially. My container div has "display:none; visibility:hidden" when page is loaded. Later on the style is changed via javascript to visible. If I load the page so that everything is visible from the start all is fine.

Answer 1

When I'm testing this sort of stuff in IE6, the first thing I do is start removing style information. Begin by removing all the floats and clears from both the parent DIV and children DIVs. If that doesn't work, remove all padding and margins, and give the parent DIV and children DIVs each a width of 100% (leaving in your height of 100px). If that doesn't work, then post back here. If I had to venture a guess I would say it is because none of your DIVs have a width, but that is a wild guess based upon what I know of the "peekaboo bug".

Answer 2

A few things that I'd try:

• remove all CSS temporarily to determine whether the issue is CSS-specific
• add pixel widths to the floated elements as well as their parent element
• add the wmode transparent param to swfobject
• add position:relative

I've heard of a bug in Flash that apparently only occurs if the flash loads with portions of it outside of the screen (i.e. body > #flash {margin-top:-50px}). Your problem could potentially be a variation of that.

Alternatively, you could drop the div with overflow altogether and try creating a container in flash with a scrollbar and load the individual SWFs into that one container flash file.

Answer 3

This is just a workaround, but you could try to create placeholders initially for the Flash objects (like div's with the corresponding height and width) and only load the movie (via something like swfobject) when it first becomes visible. This can create some problems (ie movies not preloading before they are visible), but it may be acceptable.

Answer 4

I think I have a solution for this. I can't be absolutely sure as the page in question was restructured (because of this bug). Later on I stumbled on a similar issue with the same flash component on a different page.

The issue there was that sometimes flash gives a Stage.height=0 and Stage.width=0. This is most likely to happen when the flash is initiated outside the browser viewport. We are using the Stage dimensions to scale the contents (to width=0 and height=0 in this case).

The solution was to add an onEnterFrame handler that checks for Stage dimensions and only proceeds once they are > 0.