过渡期间的 jQuery Mobile 闪烁屏幕答案

【问题标题】：jQuery Mobile flickering screen during transitions过渡期间的 jQuery Mobile 闪烁屏幕
【发布时间】：2012-06-14 08:33:18
【问题描述】：

我正在测试一个使用 jQuery Mobile 1.1.0 构建的移动 Web 应用程序。我正在使用在 android 4.0 上运行的 Galaxy Nexus 测试网站应用程序。 CSS 滑动过渡有一个令人讨厌的闪烁，我四处寻找修复并找到了这个：

.ui-page {
    -webkit-backface-visibility: hidden;
}

但是，当我使用此修复程序时，不显示具有列表视图的索引页面。请帮我。可能是什么问题？

【问题讨论】：

这里有类似的问题：stackoverflow.com/questions/10401938/…
查看我对这个问题的回答，我得到了它的工作：stackoverflow.com/a/12749862/561545
如果您只需要从 jQM 进行转换，最好使用 github.com/PixelsCommander/Mobile-Transitions - 无闪烁，性能更好，更易于使用。

标签： android jquery-mobile flicker

【解决方案1】：

防止“闪烁”的唯一真正方法是完全禁用 jQuery Mobile 页面转换。在您的文档中，放置以下代码：

// load your custom jQuery Mobile Defaults
<script type="text/javascript" src="mobile/js/mobile-site-custom-jqm-defaults.js"></script>

// load jQuery Mobile
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

// load your scripts.js (your javascript & functions, etc.)
<script type="text/javascript" src="mobile/js/script.js"></script>

要禁用转换，请在 mobile-site-custom-jqm-defaults.js 文件中放置以下代码：

$(document).bind("mobileinit", function(){
  $.extend(  $.mobile , {
   defaultPageTransition: 'none'
  });
});

【讨论】：

【解决方案2】：

我在网络上找到了这个解决方案：
if (navigator.userAgent.indexOf("Android") != -1) { $.mobile.defaultPageTransition = 'none'; $.mobile.defaultDialogTransition = 'none'; }
我在使用 cordova 2.2.0、jquery 1.8.2 和 jquery mobile 1.2.0 编写的 Android 应用程序上对其进行了测试。我必须说它有效。我希望 jquery 移动开发团队能够解决过渡闪烁问题，但现在唯一的方法是将它们全部关闭。我想补充一点，我检查了前 30 次关于该主题的 google 搜索中被欺骗的所有 css。

【讨论】：

这个 bug 与 JQueryMobile 一样长，并且可能是最著名的。不要指望它会很快得到修复。

【解决方案3】：

它对我也不起作用（尤其是在 iOS 中）。然后我用了

<a href="index.php" data-transition="none">Index</a>

它对我有用。 Page transition

【讨论】：