Gap above fixed header on Android 4+ browser

Question

Any ideas how to remove the gap (on the screen) whitch appears during scrolling? Header has position fixed and the gap appears only on Androd (tested on Android 4.0.4).

Part of the code responsible for the header:

HTML:

<div data-role="page" id="settings">
    <div class="holo-action-bar">
        <h1><span>Settings</span></h1>
    </div>
    <div class="content content-inner"></div>
</div>

CSS:

.holo-action-bar {
  background-color: #333;
  color: #fff;
  display: block;
  position: fixed;
  top: 0; right: 0; left: 0;
  width: 100%;
  z-index: 1000;
}

Also you can see example at jquery mobile docs

UPDATE:

The problem doesn't occur on iOS (tested on iOS 5+)

Answer 1

I found the solution :

this is CSS problem on phonegap.

body {
   << height : 100%; don't use it >>
   width: 100%;
   margin:0;
   padding:0;
   top: -1px;
}

HardwareAccelaration : true