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...
Wilto committed Aug 30, 2012
1 parent 7a14aad commit 17eb6619a7e35a3fc229c8e206e51cc35dcaa078
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
@@ -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;
@@ -47,7 +47,7 @@ <h2>Popup</h2>
<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
@@ -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" );

This comment has been minimized.

Show comment
Hide comment
@johnbender

johnbender Aug 30, 2012

Contributor

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

@johnbender

johnbender Aug 30, 2012

Contributor

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

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

1 comment on commit 17eb661

@fatemak

This comment has been minimized.

Show comment
Hide comment
@fatemak

fatemak Jan 15, 2013

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

fatemak commented on 17eb661 Jan 15, 2013

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.