Skip to content
This repository
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 17eb6619a7e35a3fc229c8e206e51cc35dcaa078 1 parent 7a14aad
Mat Marquis Wilto authored
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,

1 comment on commit 17eb661

John Bender

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

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.