Scrolling iframe on mobile app jump to top of the page at some point

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>

The iframe is scrolling down/top and right/left but when I scroll at some point it jumps to the top of the page.

Reference an object instead of an iframe

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

What 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 has been known to work. But not always.