CODEWITHSUNDEEP
javascriptjqueryjquery-mobilecordova
Ram
Ram

Reputation: 91

Avoid flickering (white screen) in jQuery mobile phone

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?

Upvotes: 1

Views: 1373

Answers (1)

Daniel
Daniel

Reputation: 2014

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

Upvotes: 2

Related Questions