Search code examples
htmlipadiframescrollmobile-safari

iPad Scrolling to Top of iframe

I did my best to recreate this in something accessible. I've got an ipad mini running ios7 and am using something similar to this:

<div id="holder">
    <iframe height="100%" width="100%" src="http://www.cnn.com" id="iframe"></iframe>
</div>

#holder {
    height:500px;
    width:100%;
    overflow:scroll;
    -webkit-overflow-scrolling: touch;
}

See fiddle: http://jsfiddle.net/khJgY/4/

Now the issue is, scrolling in the iframe works fine. But if you change focus (say to one of the other HTML/CSS/JS edit boxes) the iframe scrolls back to the top left and I have no idea why.

Any help would be appreciated.

Solution

  • The following CSS fixed it for me. (source)

    On the inner iframe:

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