Question

我知道有很多关于闪烁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类的元素。将其背景颜色设置为红色会在更改页面时产生红色闪烁，覆盖整个屏幕。

Answer 1

从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!!

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

1 个答案: