Popup adds ui-mobile-viewport-transitioning to <body> tag only in certain browsers
I am running JQM v1.3.2 and testing in Chrome 45 and Firefox 40.
I have a 1 page per HTML file configuration. Here is a sample of 1 of my pages:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <meta name="viewport" content="width=device-width,initial-scale=1">
- <title>Test</title>
- <link rel="stylesheet" href="css/jquery.mobile/jqm-theme.css" />
- <link rel="stylesheet" href="css/jquery.mobile/jquery.mobile.structure-1.3.2.css" />
- <script src="js/jquery/jquery-1.11.2.js"></script>
- <script src="js/test.js"></script>
- <script src="js/jquery.mobile/jquery.mobile-1.3.2.js"></script>
- </head>
- <body>
- <div data-role="page" id="testPage" data-theme="a">
- <div data-role="header" data-position="fixed" data-tap-toggle="false">
- </div>
- <div data-role="content">
- </div>
- <div data-role="footer" data-position="fixed" data-tap-toggle="false" data-theme="b">
- </div>
- <div data-role="popup" data-id="popupTest" data-overlay-theme="b" data-transition="slidedown">
- <div data-role="header" data-theme="c">
- <h1>Test</h1>
- </div>
- <div data-role="content">
- <div>popup content</div>
- <div class="ui-grid-solo buttons">
- <div class="ui-block-a">
- <a data-role="button" href="#" data-theme="c">Close</a>
- </div>
- </div>
</div>
- </div>
- </div>
- </body>
- </html>
I am capturing the "tap" event on a button in my page content and opening the popup with .popup('open');
This is where the browsers differ. In Chrome, opening the popup triggers the JQM function "transitionPages" which is on line #4039. This in turn calls "toggleViewportClass" on line #3654. This adds the class "ui-mobile-viewport-transitioning" to the <body> element to prevent scrolling. The problem is, when I close the popup, this class is not removed. So scrolling is permanently disabled.
In Firefox, this section of code never gets triggered. I have no idea why and would love some help.
Additionally, in Chrome, this section of code ONLY gets triggered if the test page is NOT the first loaded page. So if I start at index.html and transition to testpage.html, then open the popup, scrolling is broken. But if I just type the url directly to start at testpage.html, then open the popup, it behaves the same as Firefox.