Scrolling iframe on iOS is solved, BUT the iframe page display incomplete

Question

I am trying to scroll an iframe on iOS, and I succeeded, it\'s scrolling well, reference:

http://home.jejaju.com/play/iframe-scroll.html

http://areaaperta.com/ni

Answer 1

I found a combination of div with "absolute" style and nicescroll do fix choppines.

You have to load nicescroll on the page loaded by iframe. In the same page wrap all you content with a div (with style absolute)

  #content {   position:absolute; }

Load nicescroll using wrapped div content.

  $(document).ready(function() {
    $("html").niceScroll("#content"); 
  });

Link to demo page, so you can check the code: http://areaaperta.com/nicescroll/demo/iframe6.html

Automatically, with iOS native scroll has used, in other platform you got nicescroll active.

I have test on iPad with iOS 5.1.

Answer 2

I found this to be a problem with relatively positioned content inside the frame. Get rid of this behavior when removing position: relative;

Answer 3

This solution is a bit of a hack, but is tested and works fine on iOS:

<div style="width: 760px; height: 500px; overflow: scroll !important;-webkit-overflow-scrolling:touch !important;">
    <object type="text/html" data="HTTP://YOURPAGE.URL" style="width:1000px; height:10000px;">
    </object>       
</div>

Basically, since scrolling works fine in a DIV, you embed your page code using the object tag. The problem is, due to the same origin policy, you can't determine your target page's dimensions. I found that setting a huge page size is perfectly workable (no delay or choppyness noticed...just blank space)

You can easily determine the client OS and only add this code to iOS devices.

Answer 4

Try adding -webkit-transform:translate3d(0,0,0) to the iframe style and all elements within to force hardware acceleration - should reduce the choppiness.

In main page style:

iframe {  -webkit-transform:translate3d(0,0,0); }

and in iframe style:

p { -webkit-transform:translate3d(0,0,0); }