Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
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...
commit 17eb6619a7e35a3fc229c8e206e51cc35dcaa078 1 parent 7a14aad
@Wilto Wilto authored
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" );

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ }
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.
Something went wrong with that request. Please try again.