Permalink
Browse files

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.
  • Loading branch information...
1 parent 7a14aad commit 17eb6619a7e35a3fc229c8e206e51cc35dcaa078 @Wilto Wilto committed Aug 30, 2012
Showing with 37 additions and 5 deletions.
  1. +5 −0 css/structure/jquery.mobile.popup.css
  2. +1 −1 docs/pages/popup/index.html
  3. +31 −4 js/widgets/popup.js
View
5 css/structure/jquery.mobile.popup.css
@@ -1,3 +1,8 @@
+.ui-popup-open .ui-header-fixed,
+.ui-popup-open .ui-footer-fixed {
+ position: absolute !important; /* See line #553 of popup.js */
+
+}
.ui-popup-screen {
background-image: url(data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==); /* Necessary to set some form of background to ensure element is clickable in IE6/7. While legacy IE won’t understand the data-URI’d image, it ensures no additional requests occur in all other browsers with little overhead. */
top: 0px;
View
2 docs/pages/popup/index.html
@@ -47,7 +47,7 @@
<p>This will result in the following popup:</p>
<a href="#popupBasic" data-rel="popup" data-role="button" data-inline="true">Open Popup</a>
- <div data-role="popup" id="popupBasic" data-overlay-theme="a">
+ <div data-role="popup" id="popupBasic">
<p>This is a completely basic popup, no options set.</p>
</div>
View
35 js/widgets/popup.js
@@ -494,8 +494,23 @@ define( [ "jquery",
},
_open: function( options ) {
- var coords, transition;
-
+ var coords, transition,
+ androidBlacklist = ( function() {
+ var w = window,
+ ua = navigator.userAgent,
+ // Rendering engine is Webkit, and capture major version
+ wkmatch = ua.match( /AppleWebKit\/([0-9\.]+)/ ),
+ wkversion = !!wkmatch && wkmatch[ 1 ],
+ androidmatch = ua.match( /Android (\d+(?:\.\d+))/ ),
+ andversion = !!androidmatch && androidmatch[ 1 ],
+ chromematch = ua.indexOf( "Chrome" ) > -1;
+
+ // Platform is Android, WebKit version is greater than 534.13 ( Android 3.2.1 ) and not Chrome.
+ if( androidmatch !== null && andversion == 4.0 && wkversion && wkversion > 534.13 && !chromematch ) {
+ return true;
+ }
+ return false;
+ }());
// set the global popup mutex
$.mobile.popup.active = this;
@@ -535,9 +550,21 @@ define( [ "jquery",
.removeClass( "ui-selectmenu-hidden" )
.offset( coords );
- // TODO: The fixed toolbars really only need to be hidden if the overlay has a background. Should this be conditional?
- this._page.addClass( "ui-popup-open" );
+ if ( this.options.overlayTheme && androidBlacklist ) {
+ /* TODO:
+ The native browser on Android 4.0.X ("Ice Cream Sandwich") suffers from an issue where the popup overlay appears to be z-indexed
+ above the popup itself when certain other styles exist on the same page -- namely, any element set to `position: fixed` and certain
+ types of input. These issues are reminiscent of previously uncovered bugs in older versions of Android’s native browser:
+ https://github.com/scottjehl/Device-Bugs/issues/3
+ This fix closes the following bugs ( I use "closes" with reluctance, and stress that this issue should be revisited as soon as possible ):
+
+ https://github.com/jquery/jquery-mobile/issues/4816
+ https://github.com/jquery/jquery-mobile/issues/4844
+ https://github.com/jquery/jquery-mobile/issues/4874
+ */
+ this.element.closest( ".ui-page" ).addClass( "ui-popup-open" );
@johnbender
johnbender Aug 30, 2012

We need to use the reference to the page this._page

+ }
this._animate({
additionalCondition: true,
transition: transition,

1 comment on commit 17eb661

@fatemak

Hello,
I am facing the same issue in ICS but for mobiscroll. And I am not getting where exactly i have to change to bring ur solution into effect. Can you please explain the above solution with respect to mobiscroll
Thanks

Please sign in to comment.