2

jQuery Mobile のちらつきについて多くの質問があることは承知していますが、私が見つけた「修正」はどれもうまくいきませんでした。私の問題は、Android 2.3.6 ではなく、Jelly bean でのみ発生します。

jQuery Mobile 1.2.0、jQuery 1.8.2、および Cordova 2.3.0 を使用したマルチページ アプリがあります。テストのために、空のページが 3 つだけの単純な HTML レイアウトを作成しました。それぞれのページには、ページ間を切り替えるための 3 つの「タブ」を備えた永続的な固定ナビゲーション バーが含まれています。

Android 2.3.6 を実行している私の Nexus One では、ページを切り替えるときにちらつきもなく、完全に機能します。ページが表示されるだけで、タブはそのままで色が変わるだけです。

一方、Android 4.1.1 を実行している私の Samsung Galaxy S3 mini では、問題があります。ページを切り替えると、ナビゲーション バーを含む画面全体が再描画されるようです。これにより、わずか 1 マイクロ秒間ちらつきが発生し、その間、画面全体が jQuery Mobile のテーマ A のデフォルトの背景グラデーションの暗い色に見えます (画面の下部を見ると、ちらつきはあまり目立ちません)。これは Jelly bean でのみ発生しているため、これを修正する方法が必要ですよね?

以下のコードからわかるように、ページ遷移をオフにしました。

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、ちらつき中に表示されているのはクラスの要素のようです。背景色を赤に設定すると、ページを切り替えるときに画面全体を覆う赤いちらつきが生成されます。

4

1 に答える 1

0

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!!
于 2015-02-06T12:14:36.423 に答える