Firefox reloads flash when css position property is dynamically changed...

[AdamBies]

Just curious,

Does anyone know if there is a workaround for this problem?

I have an overlay created in CSS that has a flash container with flash embedded using swfobject2.2. It has a container DIV with position:fixed by default.

#demoOverlay {
	z-index:200;
	position:fixed;
	width:100%;
	height:101%;
	min-width:1016px;
	top:0px;
	left:0px;
	background:url(../img/overlay/bkg-overlay.png) repeat-x;
	vertical-align:middle;
	visibility:hidden;
	display:block;
}
	#demoContainer {
		width:990px;
		height:492px;
		background:url(../img/overlay/bkg-container.png) no-repeat;
		margin:auto;
		position:absolute;
		margin-left:-495px;
		margin-top:-246px;
		top:50%;
		left:50%;
		display:block;
	}
	#demoContainer a {
			display:block;
			width:41px;
			height:41px;
			text-decoration:none;
			position:absolute;
			right:0px;
			top:0px;
			background:url(../img/overlay/btn-close.png) no-repeat;
		}
			#demoContainer a:hover {background-position: -41px 0;}
		
		#flashContainer {
			width:922px;
			height:441px;
			margin:33px 34px 33px 34px;
			background-color:#fff;
		}

When the overlay is enabled, I wrote an onresize javascript function to dynamically change the css properties of these 2 overlay elements so that scrollbars appear when the user has shrunk their window smaller than my flash area.

This code causes the flash loaded into #flashContainer to reload any time that position property is changed between fixed or absolute:

document.getElementById("demoOverlay").style.position = "absolute";

I did not copy/paste any other code since I have narrowed down the problem to the above.

The structure of the HTML is as follows...

<div id="demoOverlay">
	<div id="topLogo">&nbsp;</div>
	<div id="demoContainer">
		<a href="javascript:closeDemo();"><span class="hidden">CLOSE</span></a>
                <div id="flashContainer">
        	       &nbsp;
	        </div>
        </div>
</div>

#demoOverlay is basically a 100%width x 100%height fixed container that centers the flash on screen unless the user has collapsed their window below a threshold and then it becomes "absolute" so that the scrollbars move the content within the DIV instead of the content being locked in place.

#demoContainer is a CSS DIV wrapper with an HTML close button (to avoid any issues with FF on the mac when it comes to flash / javascript communication).

#flashContainer is the DIV where the flash gets loaded into with swfobject.

Changing the "position" property dynamically for any of the containing DIVs surrounding the flash movie makes the flash reload when the property change is triggered in the browser.

It works fine in the other browsers and the flash does not reload. I have looked for awhile for a solution and have seen other issues like this with FireFox, but no solutions that work yet.

[AdamBies]

https://bugzilla.mozilla.org/show_bug.cgi?id=90268

This is one thread that seems to have me believing that this is just something I am going to have to live with until they fix this behavior in FireFox, but if someone else has experienced the same issue and has a fix I am more than eager to see it.