javascript - Skrollr相対トップボトムはクロムの早い段階で発火します

Question

ロード時にjQueryで設定された100％の高さで、いくつかの相対位置のdivを積み重ねています。相対的に配置された各 div 内には、コンテンツを保持する固定 div があります。

ページを下にスクロールすると、skrollr を使用して固定 div のトップ -100% をアニメーション化しています。skrollr の私のマークアップはこのようなものなdata-anchor-target="#home" data-top="top:0%;"data-top-bottom="top:-100%;"ので、親スライドがビューポートの上部にある場合は上に位置し、親スライドの下部がビューポートの上部にある場合は上 -100% です。右？

2 番目の固定位置 div は画面の高さよりも少し長いため、上位 -100% にする代わりに、親がビューポートの上部にあるときに相対的な位置になります。data-100-top="position:fixed;" data-top='position:relative;'

3 番目の div は、最初の div と同じロジックに従います。data-anchor-target="#exhibitions" data-top="top:0%;"data-top-bottom="top:-100%;"

これはすべて Firefox と IE では問題なく動作しますが、Chrome と Safari では 3 番目の div のアニメーションが早すぎます。親の div が一番上に来る頃には、フィックス コンテンツは既に画面の半分に収まっています。

これが例です - http://dev.touch-akl.com/standout/

Skrollr へのリンク - https://github.com/Prinzhorn/skrollr

HTML の例

<section id="home" class="page">
    <div class="slide" data-anchor-target="#home" data-top="top:0%;"data-top-bottom="top:-100%;">
        <section class="content">
             CONTENT GOES HERE
        </section>
    </div>
</section>

<section id="about" class="page">
    <div class="slide" data-anchor-target="#about" data-100-top="position:fixed;" data-top='position:relative;'>
        <section class="content">
             CONTENT GOES HERE - THIS IS THE ONE THAT IS HIGHER THAN THE OTHERS
        </section>
    </div>
</section>

<section id="exhibitions" class="page">
    <div class="slide" data-anchor-target="#exhibitions" data-top="top:0%;"data-top-bottom="top:-100%;">
        <section class="content">
             CONTENT GOES HERE - THIS IS THE ONE THAT TRIGGERS EARLY
        </section>
    </div>
</section>

<section id="events" class="page">
    <div class="slide" data-anchor-target="#events" data-top="top:0%;"data-top-bottom="top:-100%;">
        <section class="content">
             CONTENT GOES HERE
        </section>
    </div>
</section>