Geek Answers Handbook

IPad Scrolling to the top of an iframe

I did my best to recreate it in something accessible. I have an ipad mini running on ios7 and I use 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 the fiddle: http://jsfiddle.net/khJgY/4/

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

Any help would be appreciated.

+6
source share
3 answers

The following CSS fixed this for me. ( source )

On the internal iframe:

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

The following css fixed this for me:

 html, body { height: 100%; padding-bottom: 1px; }
+1
source

I myself ran into this problem. I found out that this is a mistake when some CSS forces the browser to jump to the top of the page, but only in certain situations, for example, in forms and iframes. For me, I found out that applying a shadow shadow with an active button did this. To fix this, I just made an effect that doesn't work on smaller screens by setting box-shadow: none ;.

+1
source

More articles:


All Articles