Phonegap 2.8 Position: fixed is not working properly

Question

After spending 16 hours and having sacrificed critters to various gods I must regretfully say that I'm on the verge of mental meltdown.

I am writing an PhoneGap 2.8 application for Android (in the future will port to iOS). As main frameworks I use jQuery (with many plugins), Require, Underscore and Backbone. On one fatal morning I got a task that header menu of my application must "imitate" the way facebook app's header does (follow the scroll).

Initially I believed that adding "position:fixed" attribute to the header div would would be simple enough- have I never been more wrong. As it turns out, position:fixed css attribute doesn't work properly in WebView and the issue has endured for years now. This issue has been discussed in length in various forums and articles and various "solutions" have been proposed- none are working in my case.

I have tried to set header's position to fixed when scrolling and to absolute when scrolling is done. Theoretically it works, but it is laggy. Having tried that I looked into different plugins or frameworks that could help in the case. iScroll - Forces a specified structure to html and severe lack of documentation threw me away from it. jQueryMobile - Since it is a whole framework, integrating it to my project would mean changing alot of stuff. As I understand, it wont provide a persistent header.

I have heard of Bartender and GloveBox but neither of them have documentation and they aren't in constant development (last commits are > year old ).

Using jsHybugger I inspected the header when it is in position: fixed an I have noticed that Blue box that overlays a div being selected in inspector is staying where click area is for the header. So if I scroll, the header moves with viewport but hitarea stays in place. It got me wondering, if there is a way to force WebView to recalculate the click area?

All and any help is very much appreciated.

Answer 1

I came across after inheriting a project which was using the positioning system. Most people would probably know not to go down this road now but just in case someone does end up here looking for a solution...

It's possible to achieve the above with flexbox layouts.

In this way the css was as follows:

.pageWrapper {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    display: flex;
    flex-direction: column;
}

.screen-content-wrapper {
    padding:0;
    flex: 1;
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
}

I didn't edit my content css so only used the above to achieve what i was after.

Hopefully someone will find this helpful.

Answer 2

Its not the problem of phonegap. Actually position: fixed doesnt work in android version lesser than 4.0 There is a quick css fix for it:

<div class="header"> this is fixed positioned div<div>

Css:

.header{ position:fixed ; -webkit-backface-visibility: hidden;  top:0; left:0; width: 100px; height:30px; background: red; }

Answer 3

So, inspired by this link, I made a quick fiddle on how this could work without position:fixed. Note that the fiddle is not the same as the code here, it just illustrates how this is supposed to work.

HTML

<div class="page-wrapper">
    <div class="header"><h3>header</h3></div>
    <div class="content-wrapper">
        <div class="content">
          <!-- Your content goes here -->
        </div>
    </div>
</div>

CSS

body {
    height: 100%;
    padding: 0;
    margin: 0;
}

.page-wrapper {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.header {
    position: absolute;
    top:0;
    left:0;
    right:0;
    padding: 3px 0;
    color: #FFF;
    background: #000;
    text-align: center;
}
.content-wrapper {
    position: absolute;
    padding:0;
    top: 65px;
    left: 0;
    right: 0;
    bottom:0;
    background: #CCC;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

.content {
    padding: 15px;
}