为什么在 iOS 上的 jQuery Mobile PhoneGap 应用程序中转换后页面会闪烁/闪烁？答案

【问题标题】：Why do the pages blink/flicker after transitions in my jQuery Mobile PhoneGap app on iOS?为什么在 iOS 上的 jQuery Mobile PhoneGap 应用程序中转换后页面会闪烁/闪烁？
【发布时间】：2012-05-04 17:21:13
【问题描述】：

我有一个 jQuery Mobile 应用程序，我已使用 PhoneGap 将其转换为 iOS 应用程序。我使用的是 jQM 1.1.0 版。

我在页面之间使用“淡入淡出”过渡（我读到它们要求不高）。

最初在 iPhone 模拟器中运行 PhoneGap 版本的应用程序时，我在每次页面转换后都会出现闪烁/闪烁 - 好像页面正在显示、清除然后重新显示 - 所有这一切都只用了几分之一秒。当我在设备上运行它时发生了一些事情。

我应用了 Sarah-Jane 对 similar question 的回答中的建议。

这解决了模拟器中的问题，但没有解决实际设备上的问题。

有没有人遇到过这个问题，并找到了解决方案？

【问题讨论】：

标签： iphone ios jquery-mobile cordova

【解决方案1】：

这个人解决了问题 - 它对我有用：

http://outof.me/fixing-flickers-jumps-of-jquery-mobile-transitions-in-phonegap-apps/

CSS：

body {
    /* Setting body margins to 0 to have proper positioning of #container div */
    margin: 0;
}

/* #container div with absolute position and 100% width and height so it takes up whole window */
#container {
    position: absolute;
    width: 100%;
    height: 100%;
}

JS：

$(document).one("mobileinit", function () {

    // Setting #container div as a jqm pageContainer
    $.mobile.pageContainer = $('#container');

    // Setting default page transition to slide
    $.mobile.defaultPageTransition = 'slide';

});

并将所有 jQM 页面包装在一个 <div id="container">

【讨论】：

这也完美地解决了我的“白页”问题。
抱歉，这不起作用。您使用的是哪个版本的 PhoneGap、jQuery 和 jQuery mobile，在什么 iOS 中？
撰写本文时发布的版本。抱歉，我不记得了。

【解决方案2】：

淡入淡出过渡闪烁，您应该将其更改为滑动或其他一些过渡模式。

【讨论】：

恐怕这并没有解决它 - 我只是得到了不同的闪烁。
我在我的应用程序中遇到了类似的问题，然后我执行了解决问题的步骤 1）将所有转换更改为幻灯片 2）检查了呈现页面的所有函数调用，可能有任何重复调用（我动态呈现我的所有页面）

【解决方案3】：

这可能会有所帮助

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

【讨论】：

【解决方案4】：

使用以下代码

$(document).ready(function() 
{ 

    $.mobile.defaultPageTransition = "none"
    $.mobile.defaultDialogTransition = 'none';
    $.mobile.useFastClick = true; 
    $.mobile.touchOverflowEnabled = true;

});

【讨论】：