Popup issues on Android 4 ICS #4816

Closed
istrasoft opened this Issue Aug 7, 2012 · 11 comments

Projects

None yet

6 participants

@istrasoft

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.

@toddparker

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

@jaspermdegroot
jQuery Foundation member

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

@istrasoft

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.

@xdumaine

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.

@xdumaine

@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

@jaspermdegroot
jQuery Foundation member

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

@xdumaine

Also related to #4874

@Wilto Wilto was assigned Aug 30, 2012
@jaspermdegroot
jQuery Foundation member

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

@Wilto Wilto added a commit that closed this issue Aug 30, 2012
@Wilto Wilto 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
@Wilto Wilto closed this in 17eb661 Aug 30, 2012
@istrasoft

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

@arschmitz arschmitz added a commit to arschmitz/jquery-mobile that referenced this issue Oct 16, 2012
@Wilto Wilto 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