jquery - モバイルサファリで動作するドッキングされたボトムdiv

Question

ウェブページにドッキングされた下部のメニューを追加したいのですが、これも中央揃えです。私はcssとpositionで試しました：次のように修正されました：

footer{
  position:fixed;
  width:980px;
  bottom:0px;
  left:50%;
  margin-left:-490px;
}

これはすべてのブラウザで機能するようですが、フッターの中央のみを表示し、端を非表示にした結果を拡大します。オーバーフロー：スクロールは効果がありません。そこで、position：absoluteをjqueryと組み合わせて使用​​することを考えました。したがって、cssは次のとおりです。

footer{
  position: absolute;
  margin: 0 auto;
  width: 980px;
}

およびjQuery：

function hscrollbar() {
   var scrollBottom = $(window).scrollTop();// + $(window).height();
   $('#footer').css('bottom', -scrollBottom + 'px');
}
window.onscroll = hscrollbar; /* Call the function when the user scrolls */
window.onresize = hscrollbar; /* Call the function when the window resizes */

これはChrome、FFなどで機能するようです。ズームインしてもフッターは非表示になりませんが、モバイルSafariでも期待どおりの結果は得られません。ズーム/サイズ変更ではフッターはまったく移動せず、スクロールするとフッターは下がり続けます。

では、ズームイン時に非表示にならず、モバイルSafariでも機能するドッキングされた下部メニューを追加するにはどうすればよいですか？