title: JQuery Mobile seeing black overlay blocks on Android
body: <p>I currently created a sample app built using JQueryMobile and Phonegap. Its a simple app, nothing special and it is intended to run on the Android platform, both for Mobile and Tablets.</p>
  
  <p>I have a page on the app which displays a popup dialog box, with a black/transparent background. This popup appears if a user clicks on a button on the previous page.</p>
  
  <p>On other mobile and tablet devices, the popup dialog with the black transparent background appears to look fine. However there is one device i've tested the app on which if the app shows the popup with the dialog, there are also black blocks that overlay the screen.</p>
  
  <p>Does anyone have any suggestions on what I could do to avoid this issue? I've looked around to see if this problem exists, but I've had no luck. The majority of devices i've tested this app on appear to not have this issue, just one device, but in being thorough, i'd like to fix this issue.</p>
  
  <p>The Screenshot of this issue can be found on the following link:</p>
  
  <p><a href="http://imgur.com/IliDsoK" rel="nofollow">http://imgur.com/IliDsoK</a></p>
  
  <p>I've copied the HTML code for your reference too.</p>
  
  <p>Thanks.</p>
  
  <pre><code>&lt;div id="fourthPage" data-role="page" data-add-back-btn="true"&gt;
      &lt;div data-role="header" data-position="fixed" id="fourthPageHeader" data-id="main-header" &gt;
          &lt;h1&gt;Fourth Page&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div data-role="content"&gt;
      &lt;ul data-role="listview" id="settingsOptionsList"&gt;
          &lt;li&gt;&lt;a href="#confirmDialog" data-rel="popup"&gt;Test Dialog&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/div&gt;
          &lt;div id="fourthPageFooter" data-role="footer" data-position="fixed" data-id="main-footer"&gt;
      &lt;/div&gt;  
  
      &lt;div data-role="popup" id="confirmDialog" data-position-to="window" data-overlay-theme="a" data-dismissible="true"&gt;
          &lt;div data-role="header" data-theme="a" class="ui-corner-top"&gt;
              &lt;h1&gt;Test Dialog&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div data-role="content" data-theme="d" class="ui-corner-bottom ui-content"&gt;
              &lt;h3 class="ui-title"&gt;This is the test dialog&lt;/h3&gt;
              &lt;a href="#" data-role="button" id="cancelDeleteButton" data-inline="false" data-rel="back" data-theme="c"&gt;OK&lt;/a&gt;      
          &lt;/div&gt;
      &lt;/div&gt;  
  &lt;/div&gt;  
  </code></pre>
  
  <p>Here is the CSS code (with the suggestions given by Marcin below):</p>
  
  <pre><code>.ui-page {
  height: 100% !important;
  -webkit-backface-visibility: hidden;
  }
  
  body{
    overflow:hidden;
  }
  
  .ui-dialog-background {
  background:rgba(0,0,0,0.5)
  }
  
  .ui-dialog-background.pop.in {
  background:rgba(0,0,0,0.5)
  }
  
  .ui-dialog {
  min-height: 100% !important;
  background:rgba(0,0,0,0.5)
  }
  </code></pre>