jQuery Mobile 在 Jelly bean 上的页面更改时重绘整个屏幕答案

【问题标题】：jQuery Mobile redraws entire screen on page change on Jelly beanjQuery Mobile 在 Jelly bean 上的页面更改时重绘整个屏幕
【发布时间】：2015-02-06 20:38:48
【问题描述】：

我知道有很多关于闪烁 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 的默认背景渐变的深色（在查看屏幕底部时闪烁不太明显）。由于这仅发生在 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 类的一个元素。将其背景颜色设置为红色会在更改页面时产生覆盖整个屏幕的红色闪烁。

【问题讨论】：

你解决了这个问题吗？如果您删除所有“data-positon='fixed'”属性，它会消失吗？
我也遇到了同样的问题，请问有什么解决办法吗？

标签： android jquery-mobile transition flicker

【解决方案1】：

从header & footer 中删除data-position="fixed" 并将这些样式添加到所有输入控件（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!!

【讨论】：