2

我知道有很多关于闪烁 jQuery Mobile 的问题，但我发现的“修复”都没有对我有用。我的问题只出现在 Jelly bean 上，而不出现在 Android 2.3.6 上。

我有一个使用 jQuery Mobile 1.2.0、jQuery 1.8.2 和 Cordova 2.3.0 的多页面应用程序。为了测试，我创建了一个简单的 HTML 布局，只有 3 个空页面，每个页面顶部都包含一个持久的固定导航栏，有 3 个“选项卡”可以在页面之间切换。

在我运行 Android 2.3.6 的 Nexus One 上，一切正常，在页面之间切换时没有闪烁。页面刚刚出现，标签保持在原位，只是切换颜色。

另一方面，在我运行 Android 4.1.1 的三星 Galaxy S3 mini 上，出现了问题。在页面之间切换时，整个屏幕似乎都被重绘了，包括导航栏。这会导致仅一微秒的闪烁，在此期间，整个屏幕似乎是 jQuery Mobile 主题 A 的默认背景渐变的深色（在查看屏幕底部时闪烁不太明显）。由于这仅发生在果冻豆上，因此必须有某种方法来解决此问题，对吗？

从下面的代码可以看出，我已经关闭了页面转换。

索引.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 回答