在 Android 上使用 JQM 和 PhoneGap 闪烁/闪烁 [英] Blinking/flickering with JQM and PhoneGap on Android
问题描述
我在 Android 平台(2.3.3 及更高版本)上将 PhoneGap 2.2.0 与 jQuery Mobile 1.2.0 结合使用.在页面上，我使用固定标题，根本没有过渡.Rest 几乎是标准的 jQuery.
I am using PhoneGap 2.2.0 in combination with jQuery Mobile 1.2.0 for my app on the Android platform (version 2.3.3 and up). On the pages I use fixed headers, and no transitions at all. Rest is pretty much standard jQuery.
当我从一页导航到另一页时，我会看到一个白色的闪烁(整个页面)，时间很短.我在互联网上搜索了几个小时.
When I am navigating from page to page I get a white blink (entire page), for a brief moment. I searched on the Internet for hours.
以下尝试失败:
- 我在互联网上发现了数十个 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 样式出错，整体性能非常糟糕(显然).
When I switch hardware acceleration off in the Android project, the blinking is gone. But then some CSS styling goes wrong and overall performance is very very bad (obviously).
我现在也尝试了下面的代码.
I tried the code below now also.
ui.page {
-webkit-transform: translateZ(0);
-webkit-perspective:1000;
-webkit-backface-visibility: hidden;
}
可惜还是没有运气.
也试过这个:https://github.com/watusi/jquery.mobile.simultaneous-transitions转换前仍有短暂(完整的白页)闪烁.
Also tried this one: https://github.com/watusi/jquery.mobile.simultaneous-transitions Still a brief (full white page) blink before transistion.
这似乎与页面本身的动画转换无关，但是在卸载旧页面之后和加载新页面之前发生了一些奇怪的事情.
It really seems that it has nothing to do with animation transitions of the page itself, but something strange that is happening right after unloading the old page and right before loading the new one.
2013 年 4 月 25 日更新:还试过:https://groups.google.com/forum/?fromgroups=#!topic/phonegap/EtZ2KwseKQ0https://github.com/jquery/jquery-mobile/issues/4024https://github.com/jquery/jquery-mobile/pull/4129
Update 25-04-2013: Also tried: 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
使闪烁消失的唯一方法是移除固定标头部分.然后它像黄油一样光滑，但我想念与面板兼容的标题.
The only thing that makes the blinking go away is removing the fixedheader part. Then it is as smooth as butter, but I miss the headers that are compatible with the panels.
还尝试了 1 页模板(一个文件中的所有页面).也没有帮助.
Also tried the 1 page template (all pages in one file). Did not help either.
jQuery Mobile 1.3.1PhoneGap 2.5.0安卓 4+设备:- 谷歌三星 Galaxy Nexus- 三星 Galaxy Tab 10.1(有问题，但不再有设备)- 三星 Galaxy Note 10.1
jQuery Mobile 1.3.1 PhoneGap 2.5.0 Android 4+ Devices: - Google Samsung Galaxy Nexus - Samsung Galaxy Tab 10.1 (had the issue, but don't have device any more) - Samsung Galaxy Note 10.1
我现在在 Github 上提交了一个问题:https://github.com/jquery/jquery-mobile/issues/6031
I have submitted an issue on Github now: https://github.com/jquery/jquery-mobile/issues/6031
推荐答案
将视口设置为 user-scalable=no 为我解决了这个问题:
Setting viewport to user-scalable=no fixed the problem for me:
改变
< meta name="viewport" content="width=device-width, initial-scale=1" />
到
< meta name="viewport" content="width=device-width, user-scalable=no" />
这篇关于在 Android 上使用 JQM 和 PhoneGap 闪烁/闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
