html - -webkit-overflow-scrolling を使用した content div: touch により、IOS デバイスで絶対位置の子要素に問題が発生する

Question

タブレット用の Web アプリケーションのプログラミングに忙殺されています。

このアプリケーションには、コンテンツが配置されるメイン コンテンツ div があります。一部のページ/スライドには、ビューポートが許可するよりも多くのコンテンツがあるため、次の CSS をコンテンツ div に追加しました。

#canvas {
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
}
.content {
    height: 100%;
    width: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.absoluteElement {
    position: absolute;
    left: 20px;
    top: 20px;
}

HTML:

<div id="canvas">
  <div class="content">
    <div class="absoluteElement">This is absolute!</div>
  </div>
</div>

これは iPad とデスクトップで完全に機能しますが、絶対配置または固定配置された子要素にはいくつか問題があります。iPad でページをスクロールすると、絶対に配置された要素は、画面に触れない限り (絶対配置位置に戻るまで) iPad でも移動しますが、デスクトップ上では移動しません (そうあるべきです)。これは、-webkit-overflow-scrolling: touch オプションを有効にした場合にのみ発生します。このオプションを無効にすると、iPad での問題は解消されますが、スクロール自体は非常に遅く、ヒッチリします。

参考までに、絶対配置要素 (.absoluteElement は、コンテンツではなく #canvas div に絶対配置する必要があります)。

どうすればこれを簡単に解決できますか?