CODEWITHSUNDEEP
jqueryjquery-mobileheaderfootercss-position
Lukas
Lukas

Reputation: 1356

jQuery Mobile Fixed Header and Footer scroll at the first moment. (Bug?)

My question is about JQM. I'm currently developing an mobile app, which includes a fixed Header and Footer. On Safari and Chrome (Mac) everything works fine, but when i view the app on the iPhone or iPad Safari, the fixed Header and Footer doesn't stay on top at the first moment. After scrolling and stopping, the header and footer stay fixed, as they should.

My source:

<!DOCTYPE html>
<html>

    <head>
        <script src="phonegap.js"></script>
        <title>Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <link rel="stylesheet" href="jquery/jquery.mobile-1.2.0.min.css" />
        <link rel="stylesheet" href="jquery/jquery.mobile.theme-1.2.0.css" />
        <script src="jquery/jquery-1.8.2.min.js"></script>
        <script>
            $(document).bind("mobileinit", function() {
                $.mobile.page.prototype.options.addBackBtn = true;
            });
        </script>
        <script src="jquery/jquery.mobile-1.2.0.min.js"></script>
    </head>

    <body>
        <div data-role="page" id="master">
            <div data-role="header" data-position="fixed" class="header-custom">
                <img src="images/logo.png" style="height: 44px;"> <a href="index.html" data-icon="refresh" id="refreshButton" class="ui-btn-right" style="fmargin-top: 4px;" data-iconpos="notext">Aktualisieren</a>

            </div>
            <!-- /header -->
            <div data-role="content">
                <ul data-role="listview" id="rssListView"></ul>
            </div>
            <!-- /content -->
        </div>
        <!-- /page -->
    </body>

</html>

The custom header class:

/* Custom navbar */
.header-custom {
    height: 44px;
    background-image: url(images/header.png);
    background-size: cover;
}

Upvotes: 1

Views: 1920

Answers (1)

Lukas
Lukas

Reputation: 1356

Solved it. If i add a <h1></h1> Element to my header it works fine, but i'm not sure why JQM does that stuff. Is this a bug in JQM?

Upvotes: 1

Related Questions