android - Android ウェブアプリのヘッダーを修正

Question

phonegap を使用して Android で HTML5 アプリを作成しています。Android デバイス バージョン 2.3.6 でコードをテストしています。私は Jquery モバイルやその他のフレームワークを使用していません。すべてが HTML、CSS、jQuery だけです。ヘッダーを固定したい。これは、現時点での私の CSS の外観です。

.header {
    position:fixed;
    top:0px;
    left:0px;
    right:0px;
    width:100%;
    height:2em;
    line-height:2;
    text-align:center;
    font-size:x-large;
    font-weight:bold;
    color:#f6f6f6;
    background-color:#00539e;
    z-index:2000;
    padding-left:2em;
    padding-right:2em;
    -webkit-box-sizing:border-box;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

入力フィールドをクリックしてソフトキーボードを開くまで、問題なく動作します。キーボードが開いた瞬間、ヘッダーの上部と左側に 1 ピクセルの隙間が表示されます。スクリーンショットを見てください: .

私は SO でさまざまな提案を試みました (たとえば、コンテンツの上に表示される固定ヘッダーですが、上部にギャップがあります) が、これまでのところどれもうまくいきませんでした。他にアイデアはありますか？

コードの関連部分は次のとおりです:( http://jsfiddle.net/tZwyW/3/ )。この問題は、デスクトップ ブラウザでは発生しません。