Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

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 55f027bbef4eac40ec1d092fef41296793de98a6 1 parent 3153155
Mat Marquis Wilto authored committed
5 css/structure/jquery.mobile.popup.css
... ... @@ -1,3 +1,8 @@
  1 +.ui-popup-open .ui-header-fixed,
  2 +.ui-popup-open .ui-footer-fixed {
  3 + position: absolute !important; /* See line #553 of popup.js */
  4 +
  5 +}
1 6 .ui-popup-screen {
2 7 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. */
3 8 top: 0px;
2  docs/pages/popup/index.html
@@ -47,7 +47,7 @@
47 47 <p>This will result in the following popup:</p>
48 48 <a href="#popupBasic" data-rel="popup" data-role="button" data-inline="true">Open Popup</a>
49 49
50   - <div data-role="popup" id="popupBasic" data-overlay-theme="a">
  50 + <div data-role="popup" id="popupBasic">
51 51 <p>This is a completely basic popup, no options set.</p>
52 52 </div>
53 53
35 js/widgets/popup.js
@@ -494,8 +494,23 @@ define( [ "jquery",
494 494 },
495 495
496 496 _open: function( options ) {
497   - var coords, transition;
498   -
  497 + var coords, transition,
  498 + androidBlacklist = ( function() {
  499 + var w = window,
  500 + ua = navigator.userAgent,
  501 + // Rendering engine is Webkit, and capture major version
  502 + wkmatch = ua.match( /AppleWebKit\/([0-9\.]+)/ ),
  503 + wkversion = !!wkmatch && wkmatch[ 1 ],
  504 + androidmatch = ua.match( /Android (\d+(?:\.\d+))/ ),
  505 + andversion = !!androidmatch && androidmatch[ 1 ],
  506 + chromematch = ua.indexOf( "Chrome" ) > -1;
  507 +
  508 + // Platform is Android, WebKit version is greater than 534.13 ( Android 3.2.1 ) and not Chrome.
  509 + if( androidmatch !== null && andversion == 4.0 && wkversion && wkversion > 534.13 && !chromematch ) {
  510 + return true;
  511 + }
  512 + return false;
  513 + }());
499 514 // set the global popup mutex
500 515 $.mobile.popup.active = this;
501 516
@@ -535,9 +550,21 @@ define( [ "jquery",
535 550 .removeClass( "ui-selectmenu-hidden" )
536 551 .offset( coords );
537 552
538   - // TODO: The fixed toolbars really only need to be hidden if the overlay has a background. Should this be conditional?
539   - this._page.addClass( "ui-popup-open" );
  553 + if ( this.options.overlayTheme && androidBlacklist ) {
  554 + /* TODO:
  555 + The native browser on Android 4.0.X ("Ice Cream Sandwich") suffers from an issue where the popup overlay appears to be z-indexed
  556 + above the popup itself when certain other styles exist on the same page -- namely, any element set to `position: fixed` and certain
  557 + types of input. These issues are reminiscent of previously uncovered bugs in older versions of Android’s native browser:
  558 + https://github.com/scottjehl/Device-Bugs/issues/3
540 559
  560 + This fix closes the following bugs ( I use "closes" with reluctance, and stress that this issue should be revisited as soon as possible ):
  561 +
  562 + https://github.com/jquery/jquery-mobile/issues/4816
  563 + https://github.com/jquery/jquery-mobile/issues/4844
  564 + https://github.com/jquery/jquery-mobile/issues/4874
  565 + */
  566 + this.element.closest( ".ui-page" ).addClass( "ui-popup-open" );
  567 + }
541 568 this._animate({
542 569 additionalCondition: true,
543 570 transition: transition,

0 comments on commit 55f027b

Please sign in to comment.
Something went wrong with that request. Please try again.