Flash objects restart or disappear when its container is re-styled

I've created a jQuery plug-in that allows a selected panel of a web page to be pinned to the top of the browser view-port when the user scrolls a long page after passing a particular horizontal point on the page.

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

The pin or unpi开发者_StackOverflow中文版n change occurs when the CSS property "position" switches between fixed, absolute and static. This forces Firefox to redraw its elements and it causes the <object> to 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 <object> tag from reloading? I admit the Flash is an ad, but this problem only occurs in Firefox. Although there are suggestions that this may be a bug, I have searched without success and I'm scratching my pate with a deadline fast approaching.

Thanks in advance!

Peter

This is a known bug in firefox itself... Actually its been listed on their bugzilla reporting system since 2001 and still has not been fixed, and probably wont be fixed by the looks of it.

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

The simplest workaround I've found is to add the css {overflow: hidden} to the parent of the swf object. That works in the two instances I've had this problem.

In one of our webapp we have two panels each one containing a flash animation. Only one of the panels is shown while the other is hidden. Initially we used jquery .hide() and .show() on the panels but with Chrome (21.0) everytime the visibilty of one panel changed from hidden to block the flash animation put inside restarted.

We tried different solutions suggested on the Net, but only one is working well: avoid changes to the display or the visibility css properties and hide the panels by changing the absolute position instead.

Something like this:

<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 have this problem with Chrome only, while IE9 and FireFox 15 works with .hide() and .show(). I hope it helps.

I was looking for solution to support overflow: hidden; property in Firefox when embedded flash content in it. So I have different work around.

I have played with zIndex property on new-banner div in the code below, which avoids the problem discussed above in the question "the pin or unpin change occurs when the CSS property".

In my case I was using CSS property overflow:hidden; which I was toggling, 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.