I've been struggling a lot with the issue of page blinking/flickering issue which constantly happened in my PhoneGap app. The issue does not lie in the PhoneGap SDK but the UI framework I used which is the jQuery Mobile (jQM). I'm using jQuery Mobile version 1.3.2 and PhoneGap 3.3.0.
This is how the issue happened. Whenever I moved from one page to another page (I'm using the multi-page template structure of jQM), the latter page would shift abruptly after the page transition had completed. What I mean by "shirt abruptly" is every element on the 2nd page is moved towards the top left corner of the screen around 10 to 30 pixels right after the whole page has been rendered completely. This issue is most noticeable in the iOS version of my PhoneGap app and less significant in the Android version. It does not affect the Web App version at all.
After days of fruitless research, I finally found a working solution to get rid of this annoying issue. Kudos to the user Jeff who posted the solution in the forum. Here's the link: http://stackoverflow.com/questions/10453368/why-do-the-pages-blink-flicker-after-transitions-in-my-jquery-mobile-phonegap-ap
Here's what you need to do. Add the following CSS and JavaScript lines to your files.
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%;
}
JavaScript
$(document).one("mobileinit", function () {
// Setting #container div as a jqm pageContainer
$.mobile.pageContainer = $('#container');
// Setting default page transition to slide
$.mobile.defaultPageTransition = 'slide';
});
And then you need to wrap all your jQM pages (single or multi-pages) within a div with the id="container".
HTML
<body>
<div id="container">
<div data-role="page">
...
</div>
</div>
</body>
That's it! You don't need to disable all your fancy page transition effects, or changing your tag attributes or even hacking some of the jQM stylesheets (e.g. -webkit-backface-visibility).
not working
ReplyDeleteTry to use the Ionic framework because it gives a more better performance than most JS frameworks out there when you're working on a PhoneGap app.
Delete