iOS browser - iFrame jumps to top when changing cs

问题:

This problem seems to have been around forever. Under some specific circumstances, iOS browsers surface this frustrating bug.

The issue:

If you have a web page which contains an iFrame and you are modifying the iFrames content document programmatically, the iFrame will jump to the top of the page. However, this only happens if the page, before the DOM manipulation, is beyond some height, typically this seems to be a length greater than twice the length of the viewport.

This issue appears regardless of whether you are modifying the DOM structure or changing style properties.

This bug is only present on iOS, including the latest release as of this time (9.2)

回答1:

Problem description:

The issue appears to be that browsers in iOS (including chrome as it uses the same rendering engine) are not correctly calculating the height of iFrames, this is causing jumping behaviour when repaints occur on the browser.

The solutions:

Solution A: Adding the following code to the iFrame stylesheet resolves the issue in most cases, though scrolling for drag events etc may present problems with this approach.

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

Solution B: When the iFrame has rendered everything, you should calculate the height of the iFrame content then set that height value explicitly on the iFrame element using an inline style in javascript. This value needs to be updated as content is modified or added in the iFrame, you must ensure the height is always correct to prevent the jumping from reoccurring.

This presents challenges when dealing with third party plugins and widgets which alter the page with no obvious callbacks. The best case for dealing with this for now is the use of mutation observers.

回答2:

If you use some code like this

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

Try to remove doc.close(); It helped me.

回答3:

I found a solution in Ionic 3, it can install the native keyboard and disable the autofocus on input, with the next code

import { Keyboard } from '@ionic-native/keyboard';

this.Keyboard.disableScroll(true);