Dialog launched from footer breaks layout

Dialog launched from footer breaks layout

Hi,

I have a button in my page's footer that opens a popup dialog. The problem is, whenever I close the dialog (click X on top left), the page layout breaks and elements have the wrong vertical position (they are moved up so top of page is inaccessible). For this bug to happen, the page must be tall enough to show a scrollbar.

This doesn't happen in desktop Firefox but happens in Android's browser (tested on my phone, and in Android Emulator 1.6-2.2).
EDIT: Just noticed it happens in Google Chrome, so you can easily test this on a desktop computer. Just make sure the window is small enough to show a scrollbar.

Anyone know a way around this?

Thanks.


Test code:
  2. <!DOCTYPE HTML>
  3. <html>
  4. <head>
  5. <title>Sears Rebate Finder</title>
  6. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
  7. <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
  8. <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
  9. </head>
  10. <body>
  11. <div data-role="page" id="mypage">
  12. <div data-role="header">
  13. <h1>Top Header</h1>
  14. <a href="#email-dialog" data-rel="dialog">Email Popup 1 (works)!</a>
  15. </div>
  17. <div data-role="content" data-theme="d">
  18. <div>
  19. <ul id="cat-results-list" data-role="listview" data-theme="d" class="ui-grid-a">
  20. <li>List item...</li><li>List item...</li><li>List item...</li>
  21. <li>List item...</li><li>List item...</li><li>List item...</li>
  22. <li>List item...</li><li>List item...</li><li>List item...</li>
  23. <li>List item...</li><li>List item...</li><li>List item...</li>
  24. <li>List item...</li><li>List item...</li><li>List item...</li>
  25. </ul>
  26. </div>
  28. <p>
  29. Some more content text...
  30. </p>
  31. </div>
  33. <div data-role="footer">
  34. <h1>Bottom Header</h1>
  35. <a href="#email-dialog" data-rel="dialog">Email Popup 2 (doesn't)!</a>
  36. </div>
  38. </div>
  40. <div data-role="page" id="email-dialog">
  41. <div data-role="header">
  42. <h1>My Dialog</h1>
  43. </div>
  44. <div data-role="content" data-theme="d">
  45. Hi from dialog!
  46. </div>
  47. </div>
  49. </body>
  50. </html>