Androidで position: 100%; height: 100%; の要素がスクロールすると何故か隙間ができる

前回に続きまたAndroidの問題です。
スマホサイト案件で画面いっぱいの固定配置の要素を敷かなけれいかず、以下のようにコードを書きました。

HTML

<div class="mod-posf"></div>

<div class="mod-page">
.
.
.
</div>

CSS

.mod-posf {
    background: rgba(0, 0, 0, 0.6);
  height: 100%;
  position: fixed;
  width: 100%;
}

これで思い通り.mod-posfが画面いっぱいに固定配置されました。
ここまでは良かったのですが、Android端末でスクロールしてみると、下記の画像のように、画面下部に隙間ができてしまいます。

図(Android4.0.4で確認)

実機確認用

スクロールした時にがアドレスバー無くなった分だけ表示領域が広がるのですが、何故か高さ100%の要素の高さが変わりません。
iPhoneもスクロール時にはアドレスバーが小さくなるのですが、高さ100%の要素の高さは変わります。 CSSでどうにかできないかと考えたのですが、上手く行かず...仕方ないのでjQueryでどうにかしました。

JavaScript

$(function() {
    var $w = $(window);

    $w.on('scroll', function() {
        $('.mod-posf').css('height', $w.innerHeight());
    });
});

スクロールされる度に動的に画面の高さを取得し、高さ100%の要素に高さをあてていきます。 　 時間がなかったのでこれで乗り切りましたが、もっとスマートなやり方がありそうな気がします。

参考サイト

• android - Fixed position, 100% height element, not always 100% on mobile - Stack Overflow