1

I am devloping a phonegap app, I used a multi page template like page1.html, page2.html. Each page hits the server and renders the output and show it in a listview. So the problem is if I hit to redirect from one page to another page means it shows white screen.

And also I tried lot of possible ways when I did the google search. But it not helps for me.

My code is given below:
$('#content').append('<div class="wholediv"><span class = "wholediv_content"><a style="text-decoration:none!important;"href="'+v.pagename+'.html?id='+v.nodeId +'&catname='+ v.pagecat +'"   data-ajax="false">'+'<img src="http://www.examole.com/'+image+' "  class="eventsimages" alt = "image"/>'+'<br /><p>'+v.pagename+'</p></a></span></div>');

index.html:

<div data-role="page">

            <div data-theme="a" data-role="header" data-position="fixed" data-tap-toggle = "false"  style="height:45px;">
                <h3 id = "title">
                    Moble
                </h3>
                <span class="off new_off" id = "off" >Off</span>
            </div>

               <div data-role="content" id="content">

            </div><!-- /content -->


        </div><!-- /page -->
    </body>

I need to avoid the flickering. Please I did lot of search and applied all those answers it did not help me. If I use data-transition means I need to remove data-ajax="false". What to do?

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Ram
  • 81
  • 1
  • 12

1 Answers1

2

Double flickering or Double flashing is a well known issue.

The solution posted by Rob is actually what works.

Setting in your mail css file:

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

Use this in your viewport tag aswell:

user-scalable=no

I made a basic template for phonegap. With Jquery mobile and so forth.

http://www.codemonkey.mobi/guides/base.zip

I dont see any whitescreens with my base.

Let us know if this worked for you.

Also try this:

http://blog.hackedexistence.com/phonegap-jquery-mobile-white-screen-flicker-solved

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
Daniel
  • 2,002
  • 5
  • 20
  • 32
  • hi sir,am using already use this class in my app and metaname,but it does not worked.there is a fraction of second flickering. – Ram Oct 29 '13 at 10:46
  • ok hmm.. well are you sure its not just the basic transition that you are refering to? JQM do have this 300 mili sec delay on page shifts. Maybe that is what you are seeing. :) – Daniel Oct 29 '13 at 10:49
  • I added some more stuff to my answer try it out. – Daniel Oct 29 '13 at 10:51
  • I am not sure what you mean. – Daniel Oct 29 '13 at 10:55
  • sir why we cannt use data-ajax="false" and data-transition="slide" in the same tag.for eg:page2.if we use like this tag means slide does not work. – Ram Oct 29 '13 at 11:17