7

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/nicescroll/demo.html

BUT, all solutions have an issue: the iframe page is not completely displayed...

I tested on my iphone and ipad, the iframe page displays choppy. enter image description here

any idea?

Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=9;FF=3;chrome=1;OtherUA=4" />
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.js"></script>
    <script type="text/javascript">
    $(function(){
        if (/iPhone|iPod|iPad/.test(navigator.userAgent))
            $('iframe').wrap(function(){
                var $this = $(this);
                return $('<div />').css({
                    width: $this.attr('width'),
                    height: $this.attr('height'),
                    overflow: 'scroll',
                    '-webkit-overflow-scrolling': 'touch'
                });
            });
    })
    </script>
    <title>Untitled</title>
</head>
<body>
stuff
<div>
<iframe src="iframe-scroll-long.html" height="500" width="500"></iframe>
</div>
more stuff
</body>
</html>
clami219
  • 2,958
  • 1
  • 31
  • 45
Jove
  • 247
  • 1
  • 3
  • 12
  • My code is the same as http://home.jejaju.com/play/iframe-scroll.html, you can see this page on iPad, the iframe page display choppy, my iOS version is 5.1.1. – Jove Jan 07 '13 at 01:54
  • Okay, but I can't view source, can you post the code from that webpage please? –  Jan 07 '13 at 02:53
  • When I go to it on my itouch it looks fine –  Jan 07 '13 at 02:55
  • Hi Abe,I add code now. the iframe page looks fine on the firse screen, but when I scrolling down, the incomplete page show. – Jove Jan 07 '13 at 03:47
  • I see there is no right brace here: $('iframe').wrap(function(){ after the word function, could that be the problem? –  Jan 07 '13 at 16:27

4 Answers4

6

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.

user2619064
  • 61
  • 1
  • 1
5

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.

InuYaksa
  • 726
  • 6
  • 10
  • Thanks InuYaksa, it perfect now, no more choppines! thank you!!:) – Jove Jan 09 '13 at 05:11
  • Hey InuYaksa, could you please post your full solution? This same problem has been driving me crazy, but seems like I'm missing something trivial. I'm trying load two iframes on a page and am having scrolling issues. – rc1 Nov 24 '14 at 13:59
3

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); }
sth
  • 222,467
  • 53
  • 283
  • 367
Jon Clagg
  • 214
  • 3
  • 9
  • Thanks jc6212, I tried this, but choppiness the same, no reduce. – Jove Jan 07 '13 at 06:00
  • I had a very choppy animation within an iframe, which this trick fixed. All I had to do was add it to the element being animated. Cheers. – Greg Nov 01 '13 at 23:11
1

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

sth
  • 222,467
  • 53
  • 283
  • 367
Joakim Ekroos
  • 11
  • 1