jQueryサイクル（）スライドショーで間欠的な位置合わせ問題が発生する

Question

これはChrome、Firefox、特にSafariで断続的に発生します。 IEでは観測されていません。スライドショーは通常より上から上に表示されますが、期待どおりに機能します。ハードリフレッシュで頻繁に起こり、document.ready（）のように見えます。

ページはこちらです：http://privatecare.dreamhosters.com/

正しい負荷：

不正な負荷：

jQueryの初期化：

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> 
<script type="text/javascript" src="js/jquery.cycle.all.latest.js"></script> 

<script type="text/javascript"> 
    $(document).ready(function(){ 
    $('#homeSlides').cycle({ 
     fx: 'fade', 
     speed: 2500 
    }); 
    }); 
</script> 

HTML：

<div id="homeSlides"> 
<img src="/g/home/slide1.jpg" alt="Connecting You to Better Care" width="639" height="348" onclick='window.location="/why_choose_pca"' /> 
<img src="/g/home/slide2.jpg" width="639" height="348" alt="Updates on DOL’s Proposed Amendments to Companionship and Live-In Worker Regulations" border="0" onclick='window.location="/dol-issue-updates"' /> 
<img src="/g/home/slide3.jpg" alt="Promoting the Rights of Independent Caregivers and Registries Since 1977" width="639" height="348" onclick='window.location="/caregivers"' /> 
<img src="/g/home/slide4.jpg" alt="The Consumer-Directed Model Puts You in Control" width="639" height="348" onclick='window.location="/comparing_your_options"' /> 
<img src="/g/home/slide5.jpg" alt="Join us in Orlando October 10 – 12 for the PCA Annual Conference" width="639" height="348" onclick='window.location="/annual-conference"' /> 
</div> 

CSS

#homeWrapper { 
    position:relative; 
    margin:0 auto; 
    width:951px; 
    background: url(../g/home_bg.jpg) no-repeat; 
    min-height:888px; 
} 

#homeSlides { 
    position:absolute; 
    left:290px; 
    top: 143px; 
    width:639px; 
    height:348px; 
    overflow:hidden; 
    cursor:pointer; 
} 

誰もが前にこれを見たか、何かアドバイスはありますか？

Answer 1

これは奇妙な競合状態の一種だと私は推測しています。サイクルプラグインには、指定された要素（#homeSlides）が非静的な位置にあるかどうかを確認する領域があります。このCSSはで宣言され、あなたのスタイルをオーバーライドする要素のインラインスタイル属性に適用されます

position: relative; width: 639px; height: 348px; 

：そうでない場合は、サイクルは、以下のCSSを（幅と高さの値は明らかにあなたの実装に固有のもの）が適用されますスタイルシート。 Chromeで破損する可能性がある場合は、#homeSlidesを調べると、インラインスタイルが表示されます。インラインposition: relative;を無効にし、正しい位置に移動するのを見てください。

!importantをmain.cssのposition: absolute;宣言に追加するだけで問題を解決できる場合があります。

また、サイクルプラグインの初期化が完了した後、javascriptで絶対位置を設定することで修正することができます。

編集：

this questionをチェックしてください。その重要な宣言を削除し、すべてのスクリプトの前にすべてのCSSファイルを含める必要があります。スクリプトはCSSに適用される前に実行されています。