1

私は jquery ScrollTo プラグインに依存してページ間を水平に移動するサイトを開発しています。各「ページ」は 100% x 100% のセクションで、内部にラッパー div があり、絶対位置に要素が配置されています。

もちろん、これは IE を除くすべてのブラウザで 100% 完璧に機能します。IE のすべてのバージョン (10 も含む) で、コンテンツ要素が消えており、何らかの方法でホバーまたは選択した場合にのみ表示されます。

実際の問題のビデオと問題の開発ページは次のとおりです。

それは本当に奇妙で一貫性がなく、いくつかの要素が時々、時には部分的に現れますが、通常はまったく現れません. ウィンドウのサイズを変更すると、現在ビューポート内にある要素のみが表示されますが、ビューポートの外には表示されません (スクロール アウトして戻ると、それらは再びグリッチ アウトします)。ScrollTo を削除してデフォルトのアンカー動作を使用することは問題ありませんが、他にできることは何もないようです。

この問題に関する Google 検索では、まったく何も見つかりませんでした。

コンテンツの基本構造は効果的に次のとおりです。

<section id="content">
    <div class="mask">
        <section id="pagename">
            <div class="wrap">
                <div></div>
                <div></div>
            </div>
        </section>
        <section>
            <div class="wrap">
                <div></div>
                <div></div>
            </div>
        </section>
    </div>
</section>

CSS:

#content       {width: 100%; height: 100%; overflow: hidden; }
#content .mask {width: 800%; height: 100%;}
section        {position: relative; display: block; width: 12.5%; height: 100%; float: left;}
.wrap          {position: absolute; display: block; top: 50%; left: 50%; height: 860px; margin-top: -430px; width: 860px; margin-left: -430px; overflow: visible;}

.wrap 内の div は、ページの周りに絶対に配置されます。

実際にはすべてが適切な場所にあり、コンテンツは正しくレンダリングされます (表示されると)。そして、問題が始まるのは .wrap の内容だけのようです (.wrap にテスト背景を設定すると、問題が発生していないことがわかります。内容だけです)。

誰かがこの問題の原因を明らかにすることができれば、それがどのように動作するのかを深く理解していただければ幸いです。

乾杯、 ネイサン

4

1 に答える 1

1

わかりました、私はこの問題を解決しました。

ページの他の場所 (その #content セクション内ではない) に、固定位置の別の div がありました。何らかの理由で、これを修正したままにしておくと、他の要素がスクロールして表示されるという IE の問題が発生していました。その div を絶対配置に変更すると (すべてのスクロールは #content セクション内で行われたため、この場合は問題ありません)、すべての違いが生じました。

jQuery ScrollTo はこれとは何の関係もないことを付け加えておく必要があります (すべてのスクリプトを削除し、 #content でオーバーフロー自動を使用してスクロールバーを取得すると、それがなくても問題が発生することが示されました)。これは純粋に、固定配置された要素の上に要素をスクロールする際のレンダリングの問題です。

于 2013-06-05T09:52:55.893 に答える