JQuery Mobile видит черные блоки наложения на Android

В настоящее время я создал пример приложения, созданного с использованием JQueryMobile и PhoneGap. Это простое приложение, ничего особенного, и оно предназначено для запуска на платформе Android, как для мобильных устройств, так и для планшетов.

У меня есть страница в приложении, которая отображает всплывающее диалоговое окно с черным / прозрачным фоном. Это всплывающее окно появляется, если пользователь нажимает кнопку на предыдущей странице.

На других мобильных и планшетных устройствах всплывающее диалоговое окно с черным прозрачным фоном выглядит нормально. Однако есть одно устройство, которое я протестировал приложение, на котором, если приложение показывает всплывающее окно с диалоговым окном, есть также черные блоки, которые перекрывают экран.

Кто-нибудь есть какие-либо предложения о том, что я мог бы сделать, чтобы избежать этой проблемы? Я посмотрел вокруг, чтобы увидеть, существует ли эта проблема, но мне не повезло. Большинство устройств, на которых я тестировал это приложение, похоже, не имеют этой проблемы, только одно устройство, но, будучи тщательным, я хотел бы решить эту проблему.

Снимок экрана этой проблемы можно найти по следующей ссылке:

http://imgur.com/IliDsoK

Я скопировал HTML-код для вашей справки.

Благодарю.

<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>

Вот код CSS (с предложениями, данными Марчином ниже):

.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)
}
Источник

3 ответа

Я смог воспроизвести вашу проблему. Попробуйте это:

div.ui-overlay-a {
    background-color: rgba(0, 0, 0, 0.5);
}
Источник

Огромное спасибо. Да этот код:

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

... похоже, решил проблему с черными пятнами в диалоге. Спасибо user3434809 и всем, что нашли время ответить.

Источник

Вам нужно использовать этот CSS:

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

для прозрачности вместо непрозрачности / фильтров и т. д.

Источник
Другие вопросы по тегам