31

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)

4 Answers 4

48

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.

9
  • 1
    Wow, this did the trick for me (Solution A). I've been searching for months. Thanks!
    – site
    Mar 15, 2017 at 18:52
  • Solution A worked for me too. All three styles are important to apply.
    – Bhawna
    Mar 27, 2017 at 7:03
  • When I do this it stops the jumping, however it causes photos below the fold on an iPhone to not display. I've tried adding -webkit-transform: translate3d(0,0,0); as research on the forum say this solves the issue but for me it doesn't. Anyone solved something like this?
    – JohnThomas
    Jul 28, 2017 at 12:34
  • Could you show a test site which exhibits the issue?
    – Matt
    Jul 31, 2017 at 9:59
  • I've had a quick look and you're using an old jQuery lazy loading library, this is almost certainly the problem. I expect it's not detecting that you are scrolling so the assets remain unloaded.
    – Matt
    Aug 23, 2017 at 7:55
0

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.

0

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);

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

I solved it with this CSS in the iframe style sheet (logically I had access to the embedded web!).

I had a problem with the width and I solved it by adding in my javascript:

var x = screen.width; 
$('body').css('width',x+'px');

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.