0

css トランジションを使用してセクションにクラスを適用すると、何らかの理由で Chrome のページに読み込みインジケーターが表示されます。このクラスは、セクションを上にスライドさせる下の値を追加します。そして、この読み込みによりアドレスバーが「アクティブ」になり、再びスライドしなくなると思います。したがって、ナビゲーションバーをカバーします。iPhone4、iOS5を使用しています。

デスクトップの Chrome や iPhone の Safari には表示されないため、原因を突き止めようとしました。また、クラスが適用されている間、アニメーションがアクティブ化されている間、およびその後にも発生します。

ページには Google マップがあり、$.ajax を使用して XML ドキュメントからデータを収集しています。ただし、これは問題の原因ではありません。クラスを適用するクリック ハンドラーを除いて、js ファイル内のすべてを無効にしようとしたためです。

CSSは次のとおりです。

#main_bottom {
    position: absolute;
    bottom: -297px;
    width: 300%;
    height: 384px;
    background-color: #ececec;
    -webkit-transition-property: bottom, left;
    -webkit-transition-duration: 0.2s;
}

#main_bottom.active {
    bottom: 36px;
}

これを使用してクラスを適用しています：

$(document).on('click', '#main_bottom > section:not(#gps) > a', function (e){
    e.preventDefault();
    $($main_bottom).toggleClass('active');
});

HTML:

<a href="/">Choose nearest shop
    <div class="bigarrow"></div>
</a>

何が原因でしょうか? どうやらアニメに関係しているようですが、理由は不明です。cssトランジションと一緒に、絶対的な位置付けでしょうか? 現在のライブ サイトへのリンクを許可されている場合は、喜んでリンクさせていただきます :)

4

1 に答える 1

0

が原因であることがわかりました<a href="/">。とはいえe.preventDefault(); が設定されていても、Chrome は依然として href で「何か」を実行していました。

于 2013-09-15T21:36:38.087 に答える