Перемещение слайдов Phonegap/jquery не работает правильно при первом вызове

У меня есть неудобный визуальный глюк. Я хочу хороший переход при смене страниц в приложении. К сожалению, в первый раз, когда я перехожу на другую страницу, вместо того, чтобы сдвигать текущую страницу и новую страницу, текущая страница сразу же заменяется новой страницей, а затем выкладывается. Когда первая страница не отображается, отображается новая страница. Однако, во второй раз, он работает как шарм!

Это работает на iphone с помощью jQuery Mobile + PhoneGap

Я сделал видео, чтобы помочь прояснить проблему: http://www.youtube.com/watch?v=Ybvzh_wTnSE

    <body style="background-color: #000;">
        <div id="container" style="display:none;">
            <div id="side-menu" style="display:none;">
                <div id="header_top"></div>
                <a href="#dives" onclick="showdives();"><div id="header_dives" class="selected"></div></a>
                <div id="header_spacer1"></div>
                <a href="#explore" onclick="showexplore();"><div id="header_explore"></div></a>
                <div id="header_spacer2"></div>
                <a href="#search" onclick="showsearch();"><div id="header_search"></div></a>
                <div id="header_spacer3"></div>
                <a href="#settings" onclick="showsettings();"><div id="header_settings"></div></a>
                <div id="header_bottom"></div>
            </div>
            <div id="slide_mask">
                <!-- START of LOGIN page -->
                <div data-role="page" id="login">           
                    <div id="home_frame">
                        <div id="home_logo"></div>
                        <div id="home_fblogin" onclick="login()"></div>
                        <div class="home_login">
                            <p>Email: <input type="text"  name="user[email]" size="30"/></p>
                            <p>Password: <input type="password"  name="user[password]" size="30"/></p>
                            <button onclick="show_page_home();">LOGIN</button>
                        </div>
                    </div>
                </div>
                <!-- END of LOGIN page -->

                <!-- START of LOGIN page -->
                <div data-role="page" id="dives" class="right_pane">    
                        <p>My dives !</p>       
                </div><!-- /content -->
                <div data-role="page" id="explore" class="hidden right_pane">   
                        <p>My explore !</p>     
                </div><!-- /content -->
                <div data-role="page" id="search" class="hidden right_pane">    
                        <p>My search !</p>      
                </div><!-- /content -->
                <div data-role="page" id="settings" class="hidden right_pane">  
                        <p>My settings !</p>
                        <button onclick="logout_db();">logout</button>      
                </div><!-- /content -->
                <!-- END of LOGIN page -->
            </div>
        </div>
        <div id="log"></div>
        <div id="data"></div>
    </body>

И соответствующий CSS:

    body {margin: 0; font: 18px Helvetica; text-align: center; background-color: #000; background: url(../img/bg_big.png) repeat;
        -webkit-user-select: none;  /* prevent copy paste for all elements */
        }
    #container { width:320px; height:460px; overflow: hidden;}

    input{ -webkit-user-select: text;  /* enable copy paste for elements with this class */}
    a {-webkit-user-select: none;  /* prevent copy paste for all elements */}
    span {-webkit-user-select: none;  /* prevent copy paste for all elements */}

    #side-menu {z-index: 1000 !important; position: fixed; height: 460px; width: 56.5px; background: url(../img/bg_big.png) no-repeat; display: inline-block;
    overflow: hidden; top: 0px; left: 0px; }
    #header_top {background: url(../img/header/header_top.png) no-repeat; background-size: 56.5px 48.96px; width: 56.5px; height: 48.96px; display: block;}
    #header_dives {background: url(../img/header/dives.png) no-repeat; background-size: 56.5px 51.75px; width: 56.5px; height: 51.75px; display: block;}
    #header_dives.selected{background: url(../img/header/dives_selected.png) no-repeat;}
    #header_spacer1{background: url(../img/header/header_space1.png) no-repeat; background-size: 56.5px 13.9px; width: 56.5px; height: 13.9px; display: block;}
    #header_explore{background: url(../img/header/explore.png) no-repeat; background-size: 56.5px 51.75px; width: 56.5px; height: 51.75px; display: block;}
    #header_explore.selected{background: url(../img/header/explore_selected.png) no-repeat;}
    #header_spacer2{background: url(../img/header/header_space2.png) no-repeat; background-size: 56.5px 15.33px; width: 56.5px; height: 15.33px; display: block;}
    #header_search{background: url(../img/header/search.png) no-repeat; background-size: 56.5px 51.75px; width: 56.5px; height: 51.75px; display: block;}
    #header_search.selected{background: url(../img/header/search_selected.png) no-repeat;}
    #header_spacer3{background: url(../img/header/header_space3.png) no-repeat; background-size: 56.5px 17.73px; width: 56.5px; height: 17.73px; display: block;}
    #header_settings{background: url(../img/header/settings.png) no-repeat; background-size: 56.5px 51.75px; width: 56.5px; height: 51.75px; display: block;}
    #header_settings.selected{background: url(../img/header/settings_selected.png) no-repeat;}
    #header_bottom{background: url(../img/header/header_bottom.png) no-repeat; background-size: 56.5px 160px; width: 56.5px; height: 160px; display: block;}

    .hidden {display: none;}
    .right_pane{width: 263.5px !important; background: url(../img/right_bg.png) no-repeat; background-size:263.5px 460px; width: 263.5px; height: 460px; left: 56.5px !important;}
    #slide_mask{ display: inline-block; overflow: hidden; padding-left: 56.5px;  width: 263.5px; height: 460px; top: 0;}

и бит JS:

    ///////////////////////////////////
    //MENU MECHANICS
    ///////////////////////////////////

    function showdives(){
        $("#side-menu .selected").removeClass("selected");
        $("#header_dives").addClass("selected");
    }

    function showexplore(){
        $("#side-menu .selected").removeClass("selected");
        $("#header_explore").addClass("selected");
    }
    function showsearch(){
        $("#side-menu .selected").removeClass("selected");
        $("#header_search").addClass("selected");
    }
    function showsettings(){
        $("#side-menu .selected").removeClass("selected");
        $("#header_settings").addClass("selected");
    }

Методы onclick только добавляют/удаляют "выбранный" класс в/из пунктов меню.

Ответ 1

Я считаю, что люди называют это "мерцающим", поэтому при поиске вы получите лучшие результаты. Посмотрев вокруг, похоже, что ваша проблема распространена на Android и может быть решена путем добавления следующего CSS:

.ui-page {
    -webkit-backface-visibility: hidden;
}

Вот несколько ссылок:

Ответ 2

Я и мои друзья используют JQuery 1.2.

Способом решения этой проблемы было поставить data-transition = "none". Возможно, это не может показаться мобильным.

так много, но работает и удаляет мерцающую проблему.

Надеюсь на эту помощь.

Ответ 3

У меня была такая же проблема, но еще хуже, когда я обернул мобильное приложение JQuery в Phonegap. Мало того, что переходы страницы мерцали, но пользовательский интерфейс был полностью сломан. Я использовал Jquery 1.8 и JQuery mobile 1.2 в этом приложении.

Я попробовал большинство решений, предложенных здесь на SO, но ничего не получилось. Затем я нашел это решение Петра Вальчишина, и все работало как сон! Очень рекомендуется для тех, кто использует JQuery mobile и Phonegap вместе.