jQuery Mobile 1.3 panel - double scrollbar bug

jQuery Mobile 1.3 panel - double scrollbar bug

Hi,

Today I wanted to implement one of JQM's neat new features, namely a panel. However, I've run into some unexpected behaviour: when I include a custom ThemeRoller .css file (v1.3), two scrollbars appear where there should be none. It only seems to happen when I place my custom theme after JQM's standard .css file (but when I place the custom theme before it, the theme doesn't load).

If anyone wishes to reproduce this:

  1. <!DOCTYPE html>
    <html>
        <head>
            <title>Title</title>
            <meta charset="utf-8">
            <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
            <link rel="stylesheet" href="custom-theme-here.min.css" />

            <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
            <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
        </head>
        <body>
            <div data-role="page" data-theme="a" id="page1">

                <div data-role="panel" data-display="reveal" data-theme="a" id="menu">
                    <ul data-role="listview" data-theme="b">
                        <li data-role="list-divider">Divider</li>
                        <li>Item 1</li>
                        <li>Item 2</li>
                        <li>Item 3</li>
                    </ul>
                </div>

                 <div data-role="header" data-theme="b">
                    <a data-icon="bars" data-iconpos="notext" data-inline="true" data-mini="true"
                       data-role="button" data-theme="c" href="#menu"></a>
                    <h1>Title</h1>
                </div>

                <div data-role="content">
                    ...
                </div>
            </div>
        </body>
    </html>

































Is this happening to anyone else, and if so, is there a known fix?

Kind thanks