JQM和PhoneGap在Android上闪烁/闪烁

Question

我在Android平台（版本为2.3.3及以上）使用PhoneGap 2.2.0和jQuery Mobile 1.2.0创建应用程序。在页面上，我使用固定头部，但没有任何转换效果。其余部分基本上是标准的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，但是我在更新日志中没有看到任何有趣的内容。编辑：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 但在转换之前仍会有一个简短的（全白页面）闪烁。

实际上，它似乎与页面本身的动画转换无关，而是发生在卸载旧页面和加载新页面之间的某些奇怪问题。

更新 25-04-2013： 还尝试过： 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 唯一能消除闪烁的方法是删除fixedheader部分。这时非常顺畅，但我错过了与面板兼容的标题。

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

jQuery Mobile 1.3.1 PhoneGap 2.5.0 Android 4+ 设备： - Google Samsung Galaxy Nexus - Samsung Galaxy Tab 10.1（遇到了问题，但是已经没有这个设备了） - Samsung Galaxy Note 10.1

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

- user1990252

Answer 1

为了解决我的问题，将viewport设置为user-scalable=no。

更改

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

至

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

- Svenbjørn Kvilt Olsen

---

修复了闪烁问题！谢谢。我会在jQuery Mobile Github上编辑这个问题。 - user1990252

你救了我的命！非常感谢！ - colourtheweb

是的！我使用HTML5样板和其中设置“initial-scale=1”的视口。#获胜 - Red2678

Answer 2

将viewport设置为user-scalable=no，解决了我的问题：

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

适用于jQuery Mobile 1.3.1、Cordova 2.8.0，在Nexus 4 / Android 4.2.2上可用。

- Nils

Answer 3

在您的帖子中第三个链接是我之前解决此问题时使用的方法。我还添加了-webkit-perspective:1000; 闪烁是由于 3D 加速和页面的反面被转换，在一瞬间变得可见，使其看起来像闪烁。

编辑：也可以查看这里获取更多信息。

- praneetloke

---

谢谢你的回答。我尝试了你的建议，但是很遗憾，在应用程序中仍然存在一个小闪烁 :)。 - user1990252

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 设备版本是哪个？

- Sheetal

---

嗨，我已经测试过了。默认情况下，我已经将defaultPageTransition设置为none。我还编辑了jquerymobile文件的建议，但没有起作用。我注意到在1.3.1中，你的第三个建议已经实现了。你的第二个建议确实不同，所以我尝试了一下。但在页面之间导航时仍然有非常小的闪烁。设备：Galaxy Nexus，运行Android 4.2.2 :)。 - user1990252

Answer 5

我尝试了数十种解决方案，但都没有奏效。对我来说，解决这个闪烁问题的最佳方法是将autohidesplashscreen属性设置为false，在前一页显示启动画面，并在deviceready中在目标页隐藏它。在某些转换中，我们将转换暂停了约0.5-1秒，以避免启动画面的闪烁。虽然不是最好的解决方案，但对我们起作用。

- Daniel J