Question

我在Android平台（版本2.3.3及更高版本）上为我的应用程序使用PhoneGap 2.2.0和jQuery Mobile 1.2.0。在页面上我使用固定标题，根本没有过渡。 Rest是非常标准的jQuery。

当我从一个页面导航到另一个页面时，我会短暂地看到一个白色的闪烁（整个页面）。我在网上搜了几个小时。

在下面尝试失败：

我在互联网上发现了数十个CSS黑客攻击。（例如：https://github.com/jquery/jquery-mobile/issues/4024和https://groups.google.com/forum/?fromgroups=#!topic/phonegap/EtZ2KwseKQ0以及Flickering when navigating between pages）。
我尝试切换固定标题（再次，我没有使用过渡效果）..
我尝试过jQuery Mobile 1.3.1。（那里没有运气）
我没有尝试过的一件事是PhoneGap 2.3.0，但我没有在changelog中看到任何有趣的事情。编辑：问题在PhoneGap 2.5.0上仍然存在。

当我在Android项目中关闭硬件加速时，闪烁消失了。但是后来一些CSS样式出错了，整体表现非常糟糕（显然）。

我现在也尝试了下面的代码。

ui.page {
-webkit-transform: translateZ(0);
-webkit-perspective:1000;
-webkit-backface-visibility: hidden;
}

糟糕但仍然没有运气。

还试过这个：https://github.com/watusi/jquery.mobile.simultaneous-transitions 在转换之前，还有一个简短的（全白页）闪烁。

它似乎与页面本身的动画过渡无关，但是在卸载旧页面之后和加载新页面之前就发生了一些奇怪的事情。

2013年4月25日更新：还尝试过： https://groups.google.com/forum/?fromgroups=#!topic/phonegap/EtZ2KwseKQ0 https://github.com/jquery/jquery-mobile/issues/4024 https://github.com/jquery/jquery-mobile/pull/4129

使眨眼消失的唯一方法是移除固定头部件。然后它像黄油一样光滑，但我错过了与面板兼容的标题。

还尝试了1页模板（一个文件中的所有页面）。也没有帮助。

jQuery Mobile 1.3.1 PhoneGap 2.5.0 Android 4+ 设备： - 谷歌三星Galaxy Nexus - 三星Galaxy Tab 10.1（有问题，但没有设备） - 三星Galaxy Note 10.1

我现在已经在Github上提交了一个问题：https://github.com/jquery/jquery-mobile/issues/6031

Answer 1

将视口设置为user-scalable = no修复了我的问题：

更改

< meta name="viewport" content="width=device-width, initial-scale=1" />

到

< meta name="viewport" content="width=device-width, user-scalable=no" />

Answer 2

你帖子中的third link是我在遇到这个问题的时候修复它的方法。我还添加了-webkit-perspective：1000;闪烁是因为3D加速，被转换的页面的背面在几分之一秒内变得可见，使其看起来像闪烁。

编辑：查看this以获取更多信息。

Answer 3

将视口设置为user-scalable = no修复了我的问题：

< meta name="viewport" content="width=device-width, user-scalable=no" />

适用于 jQuery Mobile 1.3.1 科尔多瓦2.8.0 在Nexus 4 / Android 4.2.2上

Answer 4

确保mobileinit方法中存在此代码：

//initialize jQM
$(document).on("mobileinit", function () {
  //hack to fix android page transition flicking issue
  if (navigator.userAgent.indexOf("Android") != -1){
      $.extend(  $.mobile , {
          defaultPageTransition: 'none'
      });   
    }
});

另外：更改jquerymobile.js

中的以下内容

// Make our transition handler the public default.
$.mobile.defaultTransitionHandler = simultaneousHandler;

//transition handler dictionary for 3rd party transitions
$.mobile.transitionHandlers = {
    "default": $.mobile.defaultTransitionHandler,
    "sequential": sequentialHandler,
    "simultaneous": simultaneousHandler
};

另外请告诉我您使用的是哪个Android设备版本？

Answer 5

我尝试了几十个解决方案，但没有一个能够解决这个问题，最好的办法就是将de autohidesplashscreen属性设置为false，在上一页显示启动画面并将其隐藏在目标页面中设备准备好了。在某些过渡中，我们将过渡时间约为0.5 - 1秒，以避免spalshscreen闪烁。不是最好的解决方案，但为我们工作。

在Android上使用JQM和PhoneGap闪烁/闪烁

5 个答案: