jQuery Mobile перерисовывает весь экран при смене страницы на Jelly bean

Я знаю, что есть много вопросов о мерцании jQuery Mobile, но ни одно из найденных мной «исправлений» не помогло мне. Моя проблема возникает только на Jelly bean, а не на Android 2.3.6.

У меня есть многостраничное приложение, использующее jQuery Mobile 1.2.0, jQuery 1.8.2 и Cordova 2.3.0. Ради тестирования я создал простой макет HTML всего с 3 пустыми страницами, каждая из которых содержит постоянную фиксированную панель навигации вверху с 3 «вкладками» для переключения между страницами.

На моем Nexus One под управлением Android 2.3.6 все работает отлично, при переключении между страницами не мерцает. Страницы просто появляются, а вкладки остаются на месте и просто меняют цвет.

С другой стороны, на моем Samsung Galaxy S3 mini под управлением Android 4.1.1 возникла проблема. При переключении между страницами как бы перерисовывается весь экран, включая навбар. Это вызывает мерцание всего на микросекунду, в течение которого весь экран кажется темным цветом фонового градиента по умолчанию темы A jQuery Mobile (мерцание менее выражено, если смотреть на нижнюю часть экрана). Поскольку это происходит только с желейными бобами, должен же быть какой-то способ исправить это, верно?

Как видно из приведенного ниже кода, я отключил переходы страниц.

index.html

<!DOCTYPE html>
<html>
  <head>  
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="./jquery/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css" />

    <script type="text/javascript" charset="utf-8" src="./jquery/jquery-1.8.2.js"></script>
    <script type="text/javascript" charset="utf-8" src="jquery_init.js"></script>
    <script type="text/javascript" charset="utf-8" src="./jquery/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>

    <script type="text/javascript" charset="utf-8" src="cordova-2.3.0.js"></script>    

    <style>
    </style>
  </head>

  <body>

  <div data-role="page" id="page1" data-position="fixed"data-theme="a">
    <div data-role="header" data-id="topbar" data-position="fixed" data-tap-toggle="false">
        <h1>JQTest</h1>
        <div data-role="navbar">
            <ul>
                <li><a href="#page1" class="ui-btn-active ui-state-persist">Page 1</a></li>
                <li><a href="#page2">Page 2</a></li>
                <li><a href="#page3">Page 3</a></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /header -->

    <div data-role="content">
        <h1>This is Page 1</h1>                
    </div><!-- /content -->
  </div><!-- /page -->


  <div data-role="page" id="page2" data-position="fixed"data-theme="a">
    <div data-role="header" data-id="topbar" data-position="fixed" data-tap-toggle="false">
        <h1>JQTest</h1>
        <div data-role="navbar">
            <ul>
                <li><a href="#page1">Page 1</a></li>
                <li><a href="#page2" class="ui-btn-active ui-state-persist">Page 2</a></li>
                <li><a href="#page3">Page 3</a></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /header -->

    <div data-role="content">                
        <h1>This is Page 2</h1>                
    </div><!-- /content -->
  </div><!-- /page -->


  <div data-role="page" id="page3" data-position="fixed"data-theme="a">
    <div data-role="header" data-id="topbar" data-position="fixed" data-tap-toggle="false">
        <h1>JQTest</h1>
        <div data-role="navbar">
            <ul>
                <li><a href="#page1">Page 1</a></li>
                <li><a href="#page2">Page 2</a></li>
                <li><a href="#page3" class="ui-btn-active ui-state-persist">Page 3</a></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /header -->

    <div data-role="content">                
        <h1>This is Page 3</h1>                
    </div><!-- /content -->
  </div><!-- /page -->



</body>
</html>

jquery_init.js

$(document).bind("mobileinit", function(){
    $.mobile.defaultPageTransition = 'none';
    $.mobile.defaultDialogTransition = 'none';
    $.mobile.buttonMarkup.hoverDelay = 0;
});

ИЗМЕНИТЬ

При дальнейшем тестировании кажется, что это элемент класса ui-overlay-a, который отображается во время мерцания. Установка красного цвета фона приводит к красному мерцанию, которое охватывает весь экран при смене страниц.


android transition flicker jquery-mobile
person Magnus W    schedule 12.01.2013    source источник
comment
Вы это исправили? Если вы удалите все атрибуты data-position='fixed', они исчезнут?   -  person iHiD    schedule 30.03.2013
comment
Я также столкнулся с той же проблемой, есть ли какое-либо решение для этого?   -  person Sheetal    schedule 05.02.2015

Ответы (1)


arrow_upward
0
arrow_downward

Удален data-position="fixed" из header & footer и добавлены эти стили ко всем элементам управления вводом (textarea, select dropdowns и т. д.):

[selector] input,[selector] select{   
    -webkit-appearance:none;
    appearance:none;
    box-shadow:none;
    position: relative;
    text-decoration: none;
    text-shadow: none;
}

Since data-position="fixed" is removed from the header & footer section, we need to fix the styles by adding this:

[data-role="header"],[data-role="footer"]{
    width: 100%;
    position: relative;
}

Worked for my page!!
person Epsita    schedule 06.02.2015