iOSブラウザ - JavaScriptを使用してCSSやコンテンツを変更するとiFrameが先頭に移動する

Question

この問題は永遠に残っているようです。特定の状況下では、iOSブラウザはこの不満なバグを浮き彫りにしています。

問題：あなたはiFrameを含んでいると、あなたがプログラムのiFrameコンテンツ文書を変更しているWebページを持っている場合は

は、インラインフレームは、ページの一番上にジャンプします。しかし、これは、DOM操作の前にページがある高さを超えている場合にのみ発生します。通常、これはビューポートの長さの2倍よりも長いようです。

この問題は、DOM構造の変更やスタイルプロパティの変更に関係なく表示されます。

このバグは、この時点での最新のリリースを含め、iOSの上の唯一の存在である（9.2）

Answer 1

問題の説明：問題はiOSの中のブラウザでは、（それとしてクロムを含むことであるように思われる

use the same rendering engine）がiFramesの高さを正しく計算していないため、ブラウザで再ペイントが発生したときにジャンプ動作が発生します。

ソリューション：

溶液A：はiFrameのスタイルシートに次のコードを追加するドラッグイベントなどのためにスクロールすると、このアプローチの問題点を提示してもよいが、ほとんどの場合、問題を解決します。

html, body { 
    height: 100%; 
    overflow: auto; 
    -webkit-overflow-scrolling: touch; 
} 

溶液B： のiFrameのコンテンツをレンダリングしているとき、あなたはJavaScriptでインラインスタイルを使用してIFRAME要素に明示的に値を設定するのiFrameコンテンツの高さを計算する必要があります。コンテンツがiFrameで変更または追加されると、この値を更新する必要があります。ジャンプが再発するのを防ぐには、高さが常に正しいことを確認する必要があります。

明らかなコールバックがなくてもページを変更するサードパーティ製のプラグインやウィジェットを扱うときには、これが問題になります。これを扱う最良のケースは、mutation observersの使用です。

Answer 2

あなたはこの

var doc = document.getElementById(id).contentWindow.document; 
doc.open(); 
doc.write(data); 
doc.close(); 

のようないくつかのコードを使用している場合は、それが私を助けたdoc.close();を削除するようにしてください。