Scrolling iframe on a mobile application at some point goes to the top of the page

Question

I have this html:

<header class="bar-title"> <a class="button-prev" onclick="history.back(-1)">back</a> <h1 class="title">Page</h1> </header> <div style="overflow:auto;-webkit-overflow-scrolling:touch; height: 100%; width: 100%; padding-top: 42px;"> <iframe style="height: 100%; width: 100%;" src="url"></iframe> </div> 

iframe scrolls up / down and right / left, but when I scroll at some point, it jumps to the top of the page.

Answer 1

Object reference instead of iframe

 <object type="text/html" data="content-to-scroll.html"></object> 

Which mobile device are you using?

 <header class="bar-title"> <a class="button-prev" onclick="history.back(-1)">back</a> <h1 class="title">Page</h1> </header> <div style="overflow:auto;-webkit-overflow-scrolling:touch; height: 100%; width: 100%; padding-top: 42px;"> <object type="text/html" style="height: 100%; width: 100%;" data="url"></object> </div> 

This is known to work. But not always.

Answer 2

the iframe should have a certain height, and the container should have some style.

 { -webkit-overflow-scrolling: touch!important; overflow-y: scroll!important; height: 100%; position: absolute; }