Skip to content
This repository

Popup issues on Android 4 ICS #4816

istrasoft opened this Issue · 11 comments

6 participants

Alexander Mat Marquis Todd Parker Jasper de Groot Xander Dumaine corytam

Hi all

on Android ICS 4.0 on Android Browser in my webapp the popups all appear shaded by the overlay specified by data-theme-overlay but the buttons and LIs remain clickable. It does not however happen on the same pages on Chrome or Firefox on the same phone. It also does not happen on the Popup Demo page in the Android Browser, so I am puzzled.

Does the Popup div have to be inside the div data-role="page" or outside or it does not matter ?

Unfortunately I have a hard time reproducing this in a jsfiddle...

Also, if the popup is displayed over a focused text field (can happen if popup is opened via JS), then the focused text field is displayed above the popup.

Last thing is on Firefox on Android 4, the popup div appears to be focused/selected after it is displayed, causing a very ugly yellow border to be displayed around it (the default Firefox selection color). Maybe a CSS rule could fix this.

Todd Parker

The popup should be inside the page wrapper. Are the docs exhibiting this issue on that device or just your code?

Jasper de Groot

There is an outline 0 rule already for the popup container that gets focus.


Here is a screenshot for the Firefox outline issue

Using Android ICS 4.0 and Firefox 14.0.1

Regarding the popup container being shaded by the overlay on Android Browser, there is not issue on the demo pages, and curiously enough if I apply the "position:fixed" style to the ui-popup-container, it then is displayed unshaded by the overlay. Very strange.

Xander Dumaine

I get the overlay-on-top-of-popup issue too, in ICS.

I've replicated the issue with this JS fiddle - the popup appears under the overlay in Android only. Notice that if you remove data-position="fixed" from the header, it doesn't happen.

istrasoft's workaround of applying position:fixed to the ui-popup-container works for ICS. The bug is fixed in JB.

Xander Dumaine

@toddparker yeah, but there's nothing with position fixed on that page. Position="fixed" is what is causing the issue. Searching around led me to believe it's an Android ICS bug only.

Jasper de Groot

Looks like issue #4844 is caused by the same bug.

Xander Dumaine

Also related to #4874

Jasper de Groot


About the Firefox outline issue. I cannot reproduce this on FF 15.0 on Android 4.0.4. Maybe it was a FF bug that has been fixed. Can you update the app and see if the issue still persists?

The other two issues are caused by z-index bugs in ICS (see also the two issues referenced in the previous comments). We are working on a solution for that.

Mat Marquis Wilto closed this issue from a commit
Mat Marquis Fixes #4816, fixes #4844, fixes #4874 — Prevents ICS native browser f…
…rom appearing to render the popup overlay above the popup when a position: fixed element exists on the page.
Mat Marquis Wilto closed this in 17eb661

@uGoMobi tried update, still 14.0.1 version and same issue, just FYI

Alexander Schmitz arschmitz referenced this issue from a commit in arschmitz/jquery-mobile
Mat Marquis Fixes #4816, fixes #4844, fixes #4874 — Prevents ICS native browser f…
…rom appearing to render the popup overlay above the popup when a position: fixed element exists on the page.

Sorry for asking this , but how do I make a fix to the packaged version I'm using ?
Must I make my own custom build until the next version?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.