Unity-Flash Div issue in Browser

Target Platforms Web
1

Hi,

This is a typical issue I have faced in Firefox ( 3.0.8 ). However, this does not happen in case of IE6.

I have a web page where I am loading a flash content in a div and there is another div where I am loading the unity3d content. My unity3d div is smaller and placed on top of flash div (with a higher z-index).

Something like this:

<div  id="div1" style="BORDER-RIGHT: blue 1px solid; BORDER-TOP: blue 1px solid; Z-INDEX: 0; BORDER-LEFT: blue 1px solid; BORDER-BOTTOM: blue 1px solid; POSITION: absolute; BACKGROUND-COLOR: red; WIDTH:1000; HEIGHT:500;">

 <embed  src="FlashContent.swf" wmode="transparent"><embed>

</div>

<div id="div2" style="Z-INDEX: 1; LEFT: 32px; POSITION: absolute; BACKGROUND-COLOR: green; top: 116px;">

 <object id="UnityObject" classid="clsid:444785F1-DE89-4295-863A-D46C3A781394" width="800" height="446" codebase="http://webplayer.unity3d.com/download_webplayer-2.x/UnityWebPlayer.cab#version=2,0,0,0">
	<param name="src" value="UnityContent.unity3d" />
	<embed id="UnityEmbed" wmode="transparent"
		src="UnityContent.unity3d"
		width="800" height="446"
		type="application/vnd.unity"
		pluginspage="http://www.unity3d.com/unity-web-player-2.x" 
		>
	</embed>
</object>

</div>

Now, by click of a button in the flash window, I need to show a drop-down in flash - but, the unity3d div is always coming on top. So, the drop down is going behind the unity3d div and not visible.

So, the workaround is when the flash button is clicked - change the z-index of the unity3d div so that it goes behind flash div. But, it is not working.

I have tried the following:

  1. wmode=transparent in the embed tag it does not work.
  2. If I hide the hide/show div using div style display=none/block - the unity3d content gets reloaded (which is not what I want).

Moreover, just for curiosity: if you embed unity3d content in both the divs then it continuously toggles both the div to the front in a loop without click of any button.

It will be really great, if anyone can help me out in this.

2

Unity will not work happily as background div.
Its 3D hardware accelerated and assumes that it is run actively as the “main thing”, thus gets itself in the front again on update.
Thats also related to the input grabbing I think

3

Thanks dremora for the reply. I think, you are right. I have even tried to return immediately from the Update() and OnGUI() method like the following but, the result is same:

function Update()
{
  return;
  // Other lines
}

However, I am just curious to know why it is coming properly IE6 browser(i.e. the unity goes behind the flash div without any problem). If the unity behavior is same as you have mentioned then it should not work in IE6 either.

4

So, finally found a work around - just made the height and width of the unity3d div to 1 pixel so that it is not visible and when I need it I restore the height and width. That’s all!

5

You can also play with the “visibility” css property, setting it to “hidden”.
It will not shut down your Unity3D web player.