在Android上使用JQM和PhoneGap闪烁

Blinking/flickering with JQM and PhoneGap on Android

本文关键字：PhoneGap 闪烁 JQM Android      更新时间：2023-09-26

我在Android平台上使用PhoneGap 2.2.0和jQuery Mobile 1.2.0作为我的应用程序（2.3.3及更高版本）。在页面上，我使用固定的标题，并且根本没有转换。Rest几乎是标准的jQuery。

当我从一页导航到另一页时，我会短暂地眨眼（整个页面）。我在网上搜索了好几个小时。

尝试以下内容失败：

  • 我在互联网上发现了几十个CSS黑客。（比如：https://github.com/jquery/jquery-mobile/issues/4024和https://groups.google.com/forum/?fromgroups=#！topic/phonegap/EtZ2KwseKQ0和在页面之间导航时闪烁）
  • 我试着切换固定的标题（同样，我没有使用转换效果）
  • 我试过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=#！主题/phonegap/EtZ2KwseKQ0https://github.com/jquery/jquery-mobile/issues/4024https://github.com/jquery/jquery-mobile/pull/4129

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

还尝试了1页模板（一个文件中的所有页面）。也无济于事。

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

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

将视口设置为用户可伸缩=没有解决我的问题：

更改

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

至

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

您文章中的第三个链接是我不久前遇到这个问题时如何解决的。我还添加了-webkit透视图：1000；闪烁是因为3D加速，并且正在转换的页面的背面在几分之一秒内变得可见，使其看起来像闪烁。

编辑：也可以看看这个来了解更多信息。

将视口设置为用户可伸缩=没有解决我的问题：

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

为jQuery Mobile 1.3.1科尔多瓦2.8.0在Nexus 4/Android 4.2.2 上

我尝试了几十种解决方案，但都不起作用，对我来说，解决这个问题的最佳方法是将de autohidessplashscreen属性设置为false，在前一页中显示splashscreene，并将其隐藏在deviceready的目标页中。在一些过渡中，我们睡眠了大约0.5-1秒的过渡，以避免spalshscreen眨眼。不是最好的解决方案，但对我们有效。

确保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设备版本？

相关文章：