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.
The following CSS fixed it for me. (source)
On the inner iframe:
html, body
{
width: 100%; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch;
}
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;.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With