Popup overlay on Android

Popup overlay on Android

I have a weird issue with the overlay for a popup on Android... I haven't had a chance to test this on iOS but I have a simple page with a left navigation panel, a header, and content.  On the header I have a button to open the panel and a button to load a popup.  Everything works but when I open the popup, the overlay has a large square in the upper-left corner of the window... the rest of the content fades as normal using the overlay.  Does this have something to do with my panel or am I just not putting the popup in the proper location?

  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>cLinks</title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
  8. <meta name="apple-mobile-web-app-capable" content="yes" />
  9. <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  10. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
  11. <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  12. <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
  13. </head>
  14. <body>
  15. <div data-role="page" data-theme="b">
  16. <!--- LEFT NAVIGATION MENU -------------------------------------------------------------------->
  17. <div data-role="panel" id="menu" data-theme="b" data-display="reveal" data-swipe-close="false" data-position="left" data-position-fixed="true">
  18. <ul data-role="listview" data-inset="true" data-corners="false">
  19. <li data-role="list-divider" data-theme="a">Menu</li>
  20. <li><a href="./">Home</a></li>
  21. <li><a href="#">Search/Filter</a></li>
  22. <li data-role="list-divider" data-theme="a">Session</li>
  23. <li><a href="#" data-ajax="false">Logout</a></li>
  24. </ul>
  25. </div>
  26. <!--- PAGE HEADER ----------------------------------------------------------------------------->
  27. <div id="header" data-role="header" data-position="fixed" data-tap-toggle="false">
  28. <a href="#menu" data-icon="bars" data-corners="false">Menu</a>
  29. <a href="#add" data-icon="plus" data-iconpos="right" data-rel="popup" data-position-to="window" data-transition="flip" data-corners="false">Add</a>
  30. <h1>cLinks</h1>
  31. </div>
  32. <!--- PAGE CONTENT ---------------------------------------------------------------------------->
  33. <div id="content" data-role="content">
  35. </div>
  36. <div id="add" data-role="popup" class="ui-content" data-theme="b" data-overlay-theme="a" data-dismissible="false">
  37. <form>
  38. <div data-role="fieldcontain">
  39. <label for="linkTitle" class="ui-hidden-accessible">Link Title:</label>
  40. <input type="text" id="linkTitle" name="title" value="" placeholder="Link Title" required />
  41. </div>
  42. <div data-role="fieldcontain">
  43. <label for="linkURL" class="ui-hidden-accessible">Link URL:</label>
  44. <input type="text" id="linkURL" name="link" value="" placeholder="URL" required />
  45. </div>
  46. <button type="submit" name="submit">Add Link</button>
  47. </form>
  48. <a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-left">Cancel</a>
  49. </div>
  50. </div>
  51. </body>
  52. </html>

I tried pasting this to jfiddle but apparently this problem does not occur on a desktop browser.  It does occur on the native Android browser (4.2.2), Chrome for Android, and Dolphin.