content within an iframe in ios 7 mobile keeps scrolling to top always
Question
I have an iframe displaying content wrapped in a div which has the scrolling set with css specified below
where CSS is .Page { height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; position: relative; } iframe#FrameId{ height: 100%; width: 100%; }
The issue is that there is no handling for the scrolling on javascript and relies on the browser to handle scrolling.
if I scroll the content a little, once the scroll is done with, the page jumps back to start of the page or to the top. Also if in case i click on any div or any other element in the iframe it scrolls to the top, basically it does not remember the scroll distance and always keeps scrolling to the top.
I tried disabling javascript on teh browser , i still see the same behaviour. How could i prevent it from scrolling to top? This happens only on ios 7 mobile. Is this a known issue on ios 7.?
any pointers to debug or solve this issue?
3 answers
solution1
1 2014-12-19 10:47:06
This was asked a long long time ago, but I recently (10 minutes ago) came upon this problem aswell. The reason was the
overflow: auto; -webkit-overflow-scrolling: touch;
block. When I changed all that to just
overflow-y: scroll;
without the -webkit-overflow-scrolling at all, it worked perfectly.
solution2
0 2015-11-07 16:57:12
I've just been having the same problem. With our software we use a single page with an iframe to load content with a side navigation bar on the left on the main page.
Everytime we scrolled past the first "fold" it would "flash" and then jump to the top.... I realised the problem was because a CSS change was being made somewhere on the page ( either within the iframe or on the main container page ).
By disabling the Jquery CSS changes we had and removing the CSS animations, I have now prevented the problem from occuring.
solution3
0 2016-10-13 12:40:24
This tip helped me
https://discussions.apple.com/thread/3838289
It's much easier to control overflowed divs than it is iframes, and the scrolling + blank content issues are working all the way back to iOS 4, where previously I wasn't even able to get the 2 finger scrolling to work (in iframes).
It goes something like this:
<iframe id="stupid-iframe" width="600" height="200" src="a-file.html"></iframe>
a-file.html:
<html>
<body>
<div id="wrapper" style="width: 100%; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch;">
...
</div>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.