iOS Safariでインラインフレームを使った場合に、レンダリング位置がズレる問題

スマホ用のWebサイトで、iframeを使っていたのですが、たまにiframeの中身のレンダリング位置がズレる問題に遭遇して原因の解明と対策に時間がかかったので共有します。

そもそもはiframeの高さを中身の高さと合わせたかった

なので、jQueryで、

$("iframe").load(function(){
   $(this).height(0);//一旦iframeの高さを0に
   $(this).height(this.contentWindow.document.documentElement.scrollHeight);//中身の高さに揃える
   $(this).scrollTop();//念のためiframeの中身の一番上にスクロール
});

としていたのですが、何故かたまに中身のレンダリング位置がズレる。具体的には中身のコンテンツの上の方がiframeからはみだして見れなくなる。

原因はiframeロード時の親フレームのスクロール

色々いじくりまわした結果、iframeの中身のロード、高さを揃える処理の最中に実機でページをぐいんぐいん上下にスクロールさせると100%で再現することがわかった。

対策

原因はわかったが、対策はわからない。
とりあえずこの高さを揃える処理のところでのiframeのサイズ変更が悪さをしている様なので、$(this).height(0);で高さを一旦0にするのを止め、iframeの高さの初期値を中身が丸っと入るぐらいの高さに指定。

すると今度はiframeの中身の高さを2倍に認識してしまい、iframeが余計に長くなってしまう不具合に遭遇。

とりあえず初期値をできるだけ小さくし、ブラウザのキャッシュをクリアしてみたら解決した。

もっとなんかちゃんとした解決方法を知りたい...