List view inside a popup not scrolling on a mobile device in jQuery mobile 1.4.0

Question

I have the following popup which contains a list view , the problem is that when i have tested it on an android mobile device i cant scroll the list inside the popup to show the remaining list elements , but it works perfect on the jsfiddle here . how can i solve this problem and make the list scroll on the mobile devices ? please help me ..

<div data-role="page" >
<div data-role="header"  data-theme="b">
   Main Page
 </div>
 <div data-role="content">


 <a href="" data-rel="popup"  id="Btn1"  class="ui-btn  ui-corner-all"  data-inline="true" >Show Popup</a>

 </div>


 <div data-role="popup"  id="MyPOPUP" data-position-to="window"  data-corners="false"  data-overlay-theme="a"  data-dismissible="false"  >


 <div data-role="header"  data-theme="a"   >
<div  class="ui-btn ui-input-btn ui-btn-left ui-nodisc-icon" style="background-color:transparent!important;border:none;padding-top:0;padding-left:0;" >
    <input   type="button" id="ClosePOPUP" data-icon="delete" data-iconpos="notext" data-corners="false" /></div>
    <div style="text-align:center;float:center;padding-top:11px;" ><font  size="6px" color="white"  >Countries</font></div>
</div>

<div  id="scrollContent" class="content"  data-role="content"  style="background-color: white;">
    <ul data-role="listview" id="countriesist"   style="margin: 0 !important;" >

     <li>Country</li>
     <li>Country</li>
     <li>Country</li>
     <li>Country</li>
     <li>Country</li>
     <li>Country</li>
     <li>Country</li>
     <li>Country</li>
     <li>Country</li>
     <li>Country</li>
     <li>Country</li>
     <li>Country</li>
     <li>Country</li>
     <li>Country</li>
     <li>Country</li>
     <li>Country</li>
     <li>Country</li>
     <li>Country</li>
   </ul>
  </div>


</div>
</div>