Jquery Mobile Fixed Position(Transparent, during transition)

Jquery Mobile Fixed Position(Transparent, during transition)

Hi I encounter a problem, Whenever I apply a fixed position to the footer, I get a transparent looking navbar, where it disappears, then reloads afterwards.

Attached is a screenshot of what I am referring to, also can someone kindly help me. I know it maybe something simple, but help me please, it is driving me crazy.

 


Here is my code:
  2. <!DOCTYPE html> 
  3. <html>
  4. <head>
  5. <meta charset="utf-8">

  7. <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
  8. <title>jQuery Mobile Web App</title>
  9. <link rel="stylesheet" type="text/css" href="jquery-mobile/jquery.mobile-1.4.5.css">
  10. <script src="jquery-mobile/jquery-1.11.1.min.js"></script>
  11. <script src="jquery-mobile/jquery.mobile-1.4.5.min.js"></script>
  12. <link rel="stylesheet" type="text/css" href="my-styles.css">
  13. </head> 
  14. <body> 

  16. <div data-role="page" id="page" data-add-back-btn="true">
  17. <div data-role="header">
  18.      <a href="http://www.facebook.com" data-icon="refresh" data-iconpos="notext">No Text</a>
  19.     <h1>First App</h1>
  20. <!--<span class="ui-title"></span> To remove header but keep current Settings-->
  21.      <a href="http://www.facebook.com" class ="ui-btn-right" data-icon="phone" data-iconpos="notext">Contact</a>
  22. </div>
  23. <div data-role="content" id="background">
  24. <ul data-role="listview" data-inset="true">
  25. <li>
  26.             <a href="#Registration" data-transition="slide">
  27.             <img src="image1.jpg" alt="image of cavetubing">My First App
  28.                 <p>Hello World</p>
  29.                 </a>
  30.             </li>
  31.             
  32. </ul>
  33.      
  34. </div>
  35.     

  37. <div data-role="footer" data-position="fixed" data-id="footernav">

  39.     <div data-role="navbar">
  40.     
  41.   <ul>
  42.     <li><a href="a.html"  class="ui-btn-active">Home</a></li>
  43.     <li><a href="b.html" >Maps</a></li>
  44.              <li><a href="c.html" >Galleries</a></li>
  45.              <li><a href="d.html" >Options</a></li>
  46.   </ul>
  47.     </div>
  48.      </div>
  49. </div>
  50. <div data-role="page" id="Registration">
  51. <div data-role="header">
  52. <h1>Registration</h1>
  53. </div>
  54.     <div data-role="content">
  55.     <p>Here is the information for the content<p>
  56.     </div>
  57.     <div data-role="footer" data-position="fixed" data-id="footernav">
  58.     <div data-role="navbar">
  59.     
  60.   <ul>
  61.     <li><a href="a.html">Home</a></li>
  62.     <li><a href="b.html">Maps</a></li>
  63.              <li><a href="c.html">Galleries</a></li>
  64.              <li><a href="d.html" class="ui-btn-active">Settings</a></li>
  65.   </ul>
  66.     </div>
  67. </div>
  68. </div>
  69. </div>
  70. </body>
  71. </html>
My custom css style:
/* CSS Document */

body {
    background: url(123.jpg);
    background-repeat:repeat-y;
    background-position:center center;
    background-attachment:scroll;
    background-size:100% 100%;
}
.ui-page {
    background: transparent;
}
.ui-content{
    background: transparent;
}


  }

------------------------------------
Even when I remove my css file, i still get the same problem


Thank You