为什么在 iOS 上的 jQuery Mobile PhoneGap 应用程序中转换后页面会闪烁/闪烁? [英] Why do the pages blink/flicker after transitions in my jQuery Mobile PhoneGap app on iOS?

问题描述

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

I have a jQuery Mobile app that I've converted to an iOS app using PhoneGap. I'm using version 1.1.0 of jQM.

我在页面之间使用淡入淡出"过渡(据我所知，它们要求不高).

I'm using "fade" transitions between pages (as I read they were less demanding).

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

When initially running the PhoneGap version of the app in the iPhone Simulator I was getting a flicker/flash after every page transition - as if the page was being displayed, cleared and then redisplay - all with a fraction of a second. Some thing happened when I ran it on the device.

我将 Sarah-Jane 的回答中的建议应用于类似问题.

I applied the advice in Sarah-Jane's answer to a similar question.

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

This fixed the problem in the simulator, but not on the actual device.

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

Has anyone experienced this problem, and found a solution?

推荐答案

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

This guy solved the problem - it worked for me:

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">

And wrap all your jQM pages in a single <div id="container">

这篇关于为什么在 iOS 上的 jQuery Mobile PhoneGap 应用程序中转换后页面会闪烁/闪烁?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！