jquery cycle plugin - scrollHorz flickers with flash embeds

jquery cycle plugin - scrollHorz flickers with flash embeds

Hi,

I'm using the jquery cycle plugin (awesome plugin btw) with scrollHorz to set up a carousel. The items in the carousel are flash elements. All looks good in IE7,8,9, Safari & Chrome but in FF3 on scroll the flash elements appear to flicker and bleed outside the parent div to the left.

I started out using ul/li, switched to using a div structure but it made no difference. If I slow down the speed of the transition, the flicker / bleed artefact is reduced but still there (and the slower speed is not acceptable).

Here is the html and the cycle call:

  1. <div id="slideshow">
        <ul style="margin-left: 0px; position: relative; width: 570px; height: 139px; overflow: hidden;"
            id="slides">
            <li style="position: absolute; top: 0px; left: -570px; display: none; z-index: 3; opacity: 1;">
                <a href="/HandleBanner.aspx?id=1688" id="ctl00_MainFlashPanelCollection_Repeater1_ctl00_FlashFileControl_FlashLink">
                    <object width="570px" height="139px" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"
                        classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="ctl00_MainFlashPanelCollection_Repeater1_ctl00_FlashFileControl_TheObject">
                        <param value="/sample1.swf" name="movie">
                        <param value="high" name="quality">
                        <param value="transparent" name="wmode">
                        <embed width="570px" height="139px" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"
                            src="/sample1.swf"></object>
                </a>
            </li>
            <li style="position: absolute; top: 0px; left: 0px; display: block; z-index: 4; opacity: 1;
                width: 570px; height: 139px;"><a href="/HandleBanner.aspx?id=1686" id="ctl00_MainFlashPanelCollection_Repeater1_ctl01_FlashFileControl_FlashLink">
                    <object width="570px" height="139px" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"
                        classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="ctl00_MainFlashPanelCollection_Repeater1_ctl01_FlashFileControl_TheObject">
                        <param value="/sample2.swf" name="movie">
                        <param value="high" name="quality">
                        <param value="transparent" name="wmode">
                        <embed width="570px" height="139px" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"
                            src="/sample2.swf"></object></a> </li>
            <li style="position: absolute; top: 0px; left: 0px; display: none; z-index: 1;"><a
                href="/HandleBanner.aspx?id=1525" id="ctl00_MainFlashPanelCollection_Repeater1_ctl02_FlashFileControl_FlashLink">
                <object width="570px" height="139px" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"
                    classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="ctl00_MainFlashPanelCollection_Repeater1_ctl02_FlashFileControl_TheObject">
                    <param value="/sample3.swf" name="movie">
                    <param value="high" name="quality">
                    <param value="transparent" name="wmode">
                    <embed width="570px" height="139px" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"
                        src="/sample3.swf"></object></a> </li>
        </ul>
        <div style="position: absolute; right: 0pt; top: 0px; z-index: 15; background-color: rgb(227, 221, 221);
            height: 139px; width: 13px; display: none;" id="next">
            <a href="javascript:void(0);">
                <img src="Common/images/rt.png" style="opacity: 0.75; padding-top: 54px;"></a>
        </div>
        <div style="position: absolute; left: 0pt; top: 0px; z-index: 15; background-color: rgb(227, 221, 221);
            height: 139px; width: 13px; display: none;" id="prev">
            <a href="javascript:void(0);">
                <img src="Common/images/lt.png" style="opacity: 0.75; padding-top: 54px;"></a>
        </div>
    </div>














































and the cycle call:

  1. $('#slides').cycle({
     fx: 'scrollHorz',
     speed: 6000,
     timeout: 100,
     next: '#next',
     prev: '#prev',
     pauseOnPagerHover: 1
     });








Thanks for any assistance.