JQuery Mobile seeing black overlay blocks on Android

问题

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.

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.

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.

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.

The Screenshot of this issue can be found on the following link:

http://imgur.com/IliDsoK

I've copied the HTML code for your reference too.

Thanks.

<div id="fourthPage" data-role="page" data-add-back-btn="true">
    <div data-role="header" data-position="fixed" id="fourthPageHeader" data-id="main-header" >
        <h1>Fourth Page</h1>
    </div>
    <div data-role="content">
    <ul data-role="listview" id="settingsOptionsList">
        <li><a href="#confirmDialog" data-rel="popup">Test Dialog</a></li>
    </ul>
    </div>
        <div id="fourthPageFooter" data-role="footer" data-position="fixed" data-id="main-footer">
    </div>  

    <div data-role="popup" id="confirmDialog" data-position-to="window" data-overlay-theme="a" data-dismissible="true">
        <div data-role="header" data-theme="a" class="ui-corner-top">
            <h1>Test Dialog</h1>
        </div>
        <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
            <h3 class="ui-title">This is the test dialog</h3>
            <a href="#" data-role="button" id="cancelDeleteButton" data-inline="false" data-rel="back" data-theme="c">OK</a>      
        </div>
    </div>  
</div>

Here is the CSS code (with the suggestions given by Marcin below):

.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)
}

回答1:

I was able to reproduce your issue. Give this a try:

div.ui-overlay-a {
    background-color: rgba(0, 0, 0, 0.5);
}

回答2:

you need to use this CSS:

background:rgba(0,0,0,0.5)

for transparency instead of opacity / filters etc.

回答3:

Thank you so much. Yes this code :

div.ui-overlay-a {
    background-color: rgba(0, 0, 0, 0.5);
}

...appeared to have solved the problem regards the black patches on the dialog. Thanks user3434809 and everyone for taking the time to reply.

来源：https://stackoverflow.com/questions/22942523/jquery-mobile-seeing-black-overlay-blocks-on-android

标签

android

css

cordova

jquery-mobile-popup