Flash-объекты перезапускаются или исчезают, когда их контейнер перерисовывается

Question

Я создал плагин jQuery, который позволяет закрепить выбранную панель веб-страницы в верхней части порта просмотра браузера, когда пользователь прокручивает длинную страницу после прохождения определенной горизонтальной точки на странице.

Когда панель закрепляется или открепляется, происходит странная вещь: если объект Flash SWF присутствует в качестве элемента-потомка контейнера, объект Flash либо перезапускает свою анимацию, либо полностью исчезает.

Изменение вывода или открепления происходит, когда свойство CSS "position" переключается между fixed, absolute и static. Это заставляет Firefox перерисовывать свои элементы и заставляет <object> перезагрузить и реанимировать Flash-фильм. Я прочитал этот пост с интересом: http://alexw.me/2010/12/firefox-problems-with-javascript-animation/

Кто-нибудь знает обходной путь, который предотвращает перезагрузку тега <object>? Я признаю, что Flash - это реклама, но эта проблема возникает только в Firefox. Хотя есть предположения, что это может быть ошибкой, я искал безуспешно, и я чешу свою чашку с быстрым приближением крайнего срока.

Заранее спасибо!

Peter

Answer 1

Это известная ошибка в самом Firefox ... На самом деле она была включена в их систему отчетов об ошибках с 2001 года и до сих пор не исправлена, и, вероятно, не будет исправлена ​​по ее внешнему виду.

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

Answer 2

Самый простой обходной путь, который я нашел, - это добавить css {overflow: hidden} к родительскому объекту swf. Это работает в двух случаях, когда у меня была эта проблема.

Answer 3

В одном из наших веб-приложений у нас есть две панели, каждая из которых содержит флэш-анимацию. Отображается только одна панель, а другая скрыта. Первоначально мы использовали jquery .hide () и .show () на панелях, но с Chrome (21.0) каждый раз, когда видимость одной панели изменялась со скрытой, чтобы заблокировать флэш-анимацию, помещенную внутрь, перезапускалась.

Мы попробовали различные решения, предложенные в сети, но только одно работает хорошо: избегайте изменений в свойствах display или visibility 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');

Странно, но верно, у нас есть эта проблема только с Chrome, в то время как IE9 и FireFox 15 работают с .hide () и .show (). Надеюсь, это поможет.

Answer 4

Я искал решение для поддержки свойства overflow: hidden; в Firefox, когда в него встроен флэш-контент. Так что у меня другая работа вокруг.

Я играл со свойством zIndex в new-banner div в приведенном ниже коде, что позволяет избежать проблемы, обсуждаемой выше в вопросе «изменение булавки или открепления происходит, когда свойство 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-файла.