0

この問題のトラブルシューティングを試みて、文字通り何週間も髪を引っ張ってきました。いろいろありますので、できる限り説明したいと思います。しかし、私が解決しようとしているのは、モバイル デバイスまたはタブレットでページを上下にスワイプすると、サイトのスティッキー ナビゲーションで奇妙なちらつきが発生することです。これは 2 つのページでしか行わないため、それらのページでスティッキー ヘッダー jQuery およびその他の JavaScript 関数と競合することがわかっています。

ちょっとした背景: このMobile Detect PHP クラスを使用して、モバイルおよびタブレットのブラウザーを検出します。また、jQuery モバイル ライブラリを使用して、スワイプ ジェスチャを利用して画像スライダーをスワイプします。問題が発生しているメイン ページは Work ページです: http://hybridmediadesign.com/work、スライダーはありませんが、isotopeを使用しています。

jQuery モバイル ライブラリを削除するとちらつきが解消されるため、ちらつきの原因は jQuery モバイル ライブラリにあるようです。デバイスをタップまたはスワイプすると、ヘッダー ナビゲーションの永続クラスがランダムに失われるようなものです。

したがって、ここにどのコードを表示すればよいかさえわかりませんが、スティッキー ヘッダーに使用される jQuery は次のとおりです。

<script>
window.weAreLoaded = false;
(function($) {
    var documentBind = ($.browser.mobile == true ? 'pageinit' : 'ready');

    $(document).bind(documentBind, function() {
        if(!weAreLoaded) {
            $(window).scroll(function(e) {
                var position = $.browser.webkit ? e.target.body.scrollTop : e.target.documentElement.scrollTop, header_height = 124;

                if ($(window).width() > 540) {
                    if (position >= header_height) {

                        if (!$('body').hasClass('persistent')) {
                            $('body').addClass('persistent').css('padding-top', 55);
                            $('.persistent header').animate({
                                'top' : 0
                            }, 600);
                        }
                    } else {
                        $('.persistent header').css('top', '-69px');
                        $('body').removeClass('persistent').css('padding-top', 0);
                    }
                }
            });

</script>

競合がどこから発生しているのかを知るためにここに何を貼り付ければよいかわかりません。

そして最後に、デスクトップ ブラウザでこの問題を再現できないことは非常に残念なことです。UA を変更しても問題は再現しません。文字通り、iPhone を取り出してテストする必要がありますが、これはひどいものです。あああ!!

更新 サイト全体で使用される完全な JavaScript ファイルへのリンクは次のとおりです。

4

1 に答える 1