20299

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

Answer1:

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

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

Answer2:

you need to use this CSS:

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

for transparency instead of opacity / filters etc.

Answer3:

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.

Recommend

  • In Rails, is it possible to use the show view as an edit view?
  • Drawing multiple triangles in OpenGL
  • Google Maps: Norwegian postcodes not returning any results
  • combination of smote and undersampling on weka
  • How to read data from a text file if the file location is not known in c#?
  • View/Download Pdf Files in React - Router 4
  • Refresh other frame, from another frame. Jquery
  • Full 8 bit adder, illogical output
  • C#: Import/Export Settings into/from a File
  • how to avoid repetitive constructor in children
  • How to add git credentials to the build so it would be able to be used within a shell code?
  • Groovy: Unexpected token “:”
  • How to get Eclipse Oxygen to run on Java 9
  • Display images in Django
  • Ionic 2 storage is not cleaning up on uninstall - Only for signed APK
  • Word Open XML Mail Merge
  • How to create a file in java without a extension
  • Control modification in presentation layer
  • Display issues when we change from one jquery mobile page to another in firefox
  • Different response to non-authenticated users and AJAX calls
  • Bug in WPF DataGrid
  • TFS: Get latest causes slow project reloading
  • Controls, properties, events and timers running in design time
  • Javascript Callbacks with Object constructor
  • MySQL WHERE-condition in procedure ignored
  • Join two tables and save into third-sql
  • Arrow is showed instead of the material design version hamburger icon. Why doesn't syncState in
  • How to model a transition system with SPIN
  • Updated Ionic CLI but shows previous version (Windows)
  • How to make Safari send if-modified-since header?
  • ORA-29908: missing primary invocation for ancillary operator
  • Transpose CSV data with awk (pivot transformation)
  • Data Validation Drop Down Box Arrow Disappearing
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • Can Visual Studio XAML designer handle font family names with spaces as a resource?
  • Append folder name and increment by 1 using batch script
  • Android Heatmap on canvas or ImageView
  • Converting MP3 duration time
  • Conditional In-Line CSS for IE and Others?
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize