iOS Browser - Iframe Jumps to Top When Changing CSS or Content Using JavaScript

iOS browser - iFrame jumps to top when changing css or content using JavaScript

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.

iPad Scrolling to Top of iframe

The following CSS fixed it for me.
(source)

On the inner iframe:

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

iFrame FancyBox 2.1.4 in iOS - Iframe Scrolls up After Interacting with Div Using Javascript

I agree with Janis, this seems to be an issue with iOS specifically. So, I will create or upvote a corresponding bug ticket on the Apple website.

---

Related Topics