iPad Scrolling to Top of iframe

Question

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.

Answer 1

The following CSS fixed it for me. (source)

On the inner iframe:

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

Answer 2

I just ran into this problem myself. I found out that is a bug where certain CSS makes the browser jump to the top of the page, but only in certain situations, like in forms and iframes. For me, I found out that applying a box-shadow when a button was active made this happen. To fix it, I just made the effect not trigger on smaller screens by setting box-shadow: none;.