Flash objects restart or disappear when reprogramming a container

Question

I created a jQuery plug-in that allows you to snap the selected panel of a web page to the top of the browser viewing port when the user scrolls a long page after passing a certain horizontal point on the page.

When the panel is docked or docked, a strange thing arises: if the Flash SWF object is present as a descendant element of the container, the Flash object either restarts its animation or completely disappears.

Failure or cancellation of a change occurs when the CSS property "position" switches between fixed , absolute and static . This causes Firefox to redraw its elements, and it causes the <object> reload and reanimate the Flash movie. I read this post with interest: http://alexw.me/2010/12/firefox-problems-with-javascript-animation/

Does anyone know of a workaround that prevents the reload of the <object> ? I admit that Flash is an ad, but this problem only occurs in Firefox. Although there are suggestions that this could be a mistake, I searched without success, and I scratch my paste with an approaching date.

Thanks in advance!

Peter

Answer 1

This is a known bug in firefox itself ... In fact, it has been listed in its bugzilla reporting system since 2001 and has not yet been fixed and probably will not be fixed by its appearance.

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

Answer 2

The simplest workaround I've found is to add css {overflow: hidden} to the parent swf object. This works on two occasions when I had this problem.

Answer 3

In one of our webapps we have two panels, each of which contains flash animation. Only one of the panels is displayed, and the other is hidden. Initially, we used jquery.hide () and .show () on panels, but with Chrome (21.0) every time the visibility of one panel changed from hidden to block flash animations restarted inside.

We tried various solutions offered on the Web, but only one works well: avoid changing the display or visibility css properties and hide the panels, changing the absolute position instead.

Something like that:

 <div class="panelContainer"> <div id="panel1"> <object>...flash code here...</object> </div> <div id="panel2" class="active"> <object>...flash code here...</object> </div> </div> 

 .panelContainer { position: relative; } .panelContainer > div { position: absolute; top: 0; left: -3999px; } .panelContainer > div.active { left: 0; } 

 function showPanel(id) { $('#panelContainer > div.active').removeClass('active'); $('#'+id).addClass('active'); } showPanel('panel1'); 

Strange, but true, we only have this problem with Chrome, while IE9 and FireFox 15 work with .hide () and .show (). Hope this helps.

Answer 4

I was looking for a solution to support the overflow: hidden; property overflow: hidden; in Firefox when using the built-in flash content. So I have a different job.

I played with the zIndex property in the new-banner div in the code below, which avoids the problem described above in the question "PIN code or pin changes when using the CSS property".

In my case, I used the CSS property overflow:hidden; which I switched causing an error in Firefox.

Check out the code below for a solution that worked for me:

  <div class="footerbannerbox" style=" background-image:none; position:relative; top:-3px; width:690px; height:90px; margin:0 0 0 64px; padding:0;" id="footerBannerBox" onmouseover="handleFlash();"> <div id="new-banner" style="position: absolute; width: 690px; height: 300px; top:-213px; left:-1px;"> <div id="exp-banner" style=" position:absolute;clip: rect(0px 690px 300px 0px);"> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" name="expandable" width="690" height="300" align="middle" id="expandable"> <param name="allowScriptAccess" value="sameDomain" /> <param name="allowFullScreen" value="false" /> <param name="movie" value="/swf/Unbelievable_JK_RB_690x300.swf" /> <param name="quality" value="high" /> <param name="wmode" value="transparent" /> <param name="bgcolor" value="#fff" /> <param name="menu" value="false" /> <embed src="/swf/Unbelievable_JK_RB_690x300.swf" width="690" height="300" align="middle" quality="high" wmode="transparent" bgcolor="#fff" name="expandable" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" menu="false" /> </object> </div> </div> <script type="text/javascript"> function expand() { document.getElementById("exp-banner").style.clip="rect(0px 690px 300px 0px)"; document.getElementById("new-banner").style.zIndex = '0'; } function retract() { document.getElementById("exp-banner").style.clip="rect(0px 690px 300px 0px)"; document.getElementById("new-banner").style.zIndex = '-1'; } function handleFlash(){ document.getElementById("new-banner").style.zIndex = '0'; } </script> </div> 

expand() and retract() functions are called internally from the SWF file.