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

Posted 2023-05-06

【中文标题】在 Android 上使用 JQM 和 PhoneGap 闪烁/闪烁

【英文标题】：Blinking/flickering with JQM and PhoneGap on Android

【发布时间】：2013-01-21 07:45:29

【问题描述】：

我将 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

【参考方案1】：

将视口设置为 user-scalable=no 为我解决了这个问题：

改变

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

到

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

【讨论】：

修复了我的闪烁问题！谢谢。我将在 jQuery Mobile Github 上编辑问题。

你救了我的命！非常感谢

是的！我从 html5 样板和设置“initial-scale=1”#WIN

的视口开始

【参考方案2】：

您帖子中的third link 是我不久前遇到此问题时如何解决的。我还添加了 -webkit-perspective:1000;闪烁是由于 3D 加速造成的，并且正在转换的页面的背面在几分之一秒内变得可见，使其看起来像闪烁。

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

【讨论】：

感谢您的回答。我尝试了您的建议，但糟糕的是，应用程序中仍会出现一个小闪烁：)。

【参考方案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

【参考方案4】：

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

【参考方案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
;

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

【讨论】：

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