Phone Gap

Everything works fine on emulator but on device on transitioning to the subpage flickers and the page is displayed once and again with effect

More clearly its shown 


After your custom CSS in main page add

<style>

     /*** patch for jquerymobile page flicker that was happening ***/
     .ui-page {

                  height: 100% !important; 
                  -webkit-backface-visibility: hidden;
               }
        .input { outline: none; }
</style>

And my HTML code snippet
<div data-role="page" id="infoPage"> 

     <div data-role="header" data-position="inline">
        <h1>My App 
        <a href="#anotherPage" data-icon="back" class="ui-btn-right" data-transition="flip">Back</a>
     </div>      
     <div data-role="content">
              Some Information 
     </div>  <!-- /Content --> 

     <div data-role="footer" data-id="foo1" data-position="fixed"> 
        <p>Some Footer</p>
     </div><!-- /footer --> 
</div><!-- /Page ends --> 

And now my Project looks like 



Still this is just a work around so issues associated are data-transition = "slide" does not work still but data-transition"slidereverse" works.
You can tryout different things listed on thread : here at some point it seem to be a very critical issue.

7 comments:

  1. Cool, I tweeted your post out to my followers so that more people can find this tweak.

    ReplyDelete
    Replies
    1. Thanks... I have started blogging on more regular basis on my current project on phonegap.

      Delete
  2. Keep in mind that it you try adding this attribute >> data-native-menu="false" to a dropdown select in Android.. your fix will break it :/

    There's a workaround tho, you have to programmatically add the value "hidden", show the page.. then add the "visible" value back to the "-webkit-backface-visibility" property after the page is created.

    ReplyDelete
    Replies
    1. Thank you I still have not got a chance to test on Android device.

      Delete
  3. your post really usefll,but its not working with android devices
    can you please help me out with android phonegap
    thanks

    ReplyDelete
    Replies
    1. Try to programmatically add the value "hidden", show the page.. then add the "visible" value back to the "-webkit-backface-visibility" property after the page is created.

      I guess with android you should be good then. let me know the results.

      Delete
  4. Not working for me on Android - Phonegap :(

    ReplyDelete