Solved: Flickering , Double transition problems implementing IOS on device

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 ***/
     .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.