2011-01-12 70 views
4

我創建了一個jQuery插件,當用戶滾動時,允許將選定的網頁面板固定到瀏覽器視圖端口的頂部在頁面上傳遞特定的水平點之後的長頁面。Flash對象在其容器被重新設計時重新啓動或消失

當面板固定或取消固定時,會發生一個奇怪的事情:如果Flash SWF對象作爲容器的後代元素存在,則Flash對象要麼重新開始其動畫,要麼完全消失。

當CSS屬性「位置」在fixed,absolutestatic之間切換時,會發生引腳或未引腳變化。這會強制Firefox重新繪製其元素,並且會導致<object>重新加載和重新生成Flash影片。我有興趣閱讀這篇文章:http://alexw.me/2010/12/firefox-problems-with-javascript-animation/

有沒有人知道一種解決方法,防止<object>標記重新加載?我承認Flash是一個廣告,但這個問題只發生在Firefox中。雖然有人認爲這可能是一個錯誤,但我已經搜索沒有成功,我正在抓緊我的腦袋,最後期限到期。

提前致謝!

彼得

+0

相關問題:http://stackoverflow.com/questions/298342/firefox-restarts-flash-movie-if-enclosing-div-properties-change – 2011-09-09 16:51:25

回答

4

這是在firefox本身就是一個已知的bug ......其實自2001年上市以來他們的Bugzilla報告制度,仍然沒有得到修復,並可能不會被它的外觀是固定的。

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

+0

絕對是一個史詩錯誤報告。實際上,截至2011年6月,針對Firefox的手指越過了10個 – markd 2011-10-27 07:32:08

3

我發現最簡單的解決方法是在CSS {溢出:隱藏}添加到SWF對象的父。這在我遇到這個問題的兩個實例中起作用。

1

我一直在尋找解決方案,以在Firefox中嵌入Flash內容時支持overflow: hidden;屬性。所以我有不同的工作。

我在下面的代碼,從而避免了在這個問題上面所討論的問題zIndex財產上播放新的旗幟格「銷或釘住發生變化時,CSS屬性」。

在我的情況下,我使用的CSS屬性overflow:hidden;,我正在切換,在Firefox中導致錯誤。

看看下面的代碼,一個解決方案,爲我工作:

<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()retract()功能從SWF文件內部調用。

2

在我們的一個webapp中,我們有兩個面板,每個面板都包含一個Flash動畫。只顯示其中一個面板而另一個隱藏。最初,我們在面板上使用了jquery .hide()和.show(),但每次使用Chrome瀏覽器(21.0)時,一個面板的可見性將從隱藏變爲阻止重新啓動的Flash動畫。

我們嘗試了在網絡上建議的不同解決方案,但只有一個運行良好:避免更改displayvisibility css屬性,並通過更改絕對位置來隱藏面板。

事情是這樣的:

<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'); 

奇怪但卻真實的,我們有這個問題,只有瀏覽器,而IE9和Firefox 15名的作品與.hide()和.show()。 我希望它有幫助。