Jquery Mobile, iOS 8 PhoneGap issue

Jquery Mobile, iOS 8 PhoneGap issue

All i am not sure if this is a Jquery Mobile issue, or PhoneGap issue but if you create a PhoneGap project and only support Landscape and use Jquery Mobile, then run in the simulator or device with iOS 8 the screen displayed is chopped up into 3 sections.   However if you rerun the project and select iOS 7 simulator everything is displayed correctly.  I also noticed if you select Portrait and landscape and it comes up portrait it is fine.  What is funny is if you keep rotating the screen until you are in landscape it displays everything as fine.  This happens with Jquery Mobile 1.4.2 and 1.4.3.  enclosed is the code i am using to recreated

any ideas?

 <!DOCTYPE html>

<html>

  <head>

  <title></title>

      <meta name ="viewport" content ="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

      <meta name ="msapplication-tap-highlight" content ="no" />

      <meta name ="format-detection" content ="telephone=no" />

  <meta charset="utf-8">

         <link rel = "stylesheet" href = "AppCSS\jquery.mobile-1.4.3.min.css" />

     </head>

     <style type = "text/css"

       div.div_Body {

          height: 100%;

          position : relative ;

          border:2 px solid DarkGoldenrod;

          border-radius: 7px;

          font: bold 14 px Arial;

          font-family:Arial, Helvetica, sans-serif;

          color:Black;

          text-align:center;

          background: #FFFFFF;

      }

</style>

     <body id = "body" class = "noselect"   >

      <script>

                     window.addEventListener( 'load' , function () { document.addEventListener( 'deviceready' , function () {onDeviceReady() }, false ); }, false );

          /* When this function is called, PhoneGap has been initialized and is ready to roll */

          function onDeviceReady()

          {

              console.log("in device ready");

              console.log("height " + screen.height);

              console.log("width " + screen.width);

              var myscreenWidth = screen.width;

           }


      </script>   

      <div data-role= "page" class= "ui-page " data-theme= "b" >        

          <div data-role= "header"   class= "ui-header" data-theme= "b" >

              <h1 class= "ui-title" tabindex= "0" role= "heading" aria-level= "1" > Test </h1>

          </div>

           <div data-role ="content" style ="height: 670px" class ="ui-content div_Body" role ="main">

              <p  >Send Help</p>

          </div>

     </div>

      <script type ="text/javascript" charset ="utf-8" src ="cordova.js"></script>

      <script src ="AppJS\jquery-1.9.1.min.js"></script>

       <script src ="AppJS\jquery.mobile-1.4.3.min.js"></script>

   </body>

</html>