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

Question

我将 PhoneGap 2.2.0 与 jQuery Mobile 1.2.0 结合用于 Android 平台（2.3.3 及更高版本）上的应用程序。 在页面上，我使用固定的标题，根本没有过渡。 Rest 几乎是标准的 jQuery。

当我从一个页面导航到另一个页面时，我会短暂地闪烁一下（整个页面）。我在互联网上搜索了几个小时。

以下尝试失败：

• 我在 Internet 上找到的数十个 CSS hack。 （例如：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，但我在更新日志中没有看到任何有趣的内容。编辑：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 安卓 4+ 设备： - 谷歌三星 Galaxy Nexus - 三星 Galaxy Tab 10.1（有问题，但没有设备了） - 三星 Galaxy Note 10.1

我已经在 Github 上提交了一个 issue：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 移动 1.3.1 科尔多瓦 2.8.0 在 Nexus 4 / Android 4.2.2

Answer 4

我尝试了几十种解决方案，但都没有奏效，形成我解决此闪烁的最佳方法是将 de autohidessplashscreen 属性设置为 false ，在上一页中显示启动画面并将其隐藏在目标页面中设备就绪。在某些转换中，我们将转换睡眠约 0,5 - 1 秒，以避免闪烁屏幕闪烁。不是最好的解决方案，但对我们有用。

Answer 5

确保此代码存在于您的 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
};

还请告诉我您使用的是哪个安卓设备版本？