Skip to content
This repository

Popup issues on Android 4 ICS #4816

Closed
istrasoft opened this Issue August 07, 2012 · 11 comments

6 participants

Alexander Mat Marquis Todd Parker Jasper de Groot Xander Dumaine corytam
Alexander

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
Owner

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

Alexander

Here is a screenshot for the Firefox outline issue

Using Android ICS 4.0 and Firefox 14.0.1

http://i.imgur.com/QfDM5.png

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 - http://jsfiddle.net/TpBQd/6/ 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.

http://code.google.com/p/android/issues/detail?id=6721

Jasper de Groot
Owner

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

Xander Dumaine

Also related to #4874

Jasper de Groot
Owner

@istrasoft

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 August 30, 2012
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.
17eb661
Mat Marquis Wilto closed this in 17eb661 August 30, 2012
Alexander

@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 August 30, 2012
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.
55f027b
corytam

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

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.