7

I'm looking for the correct way to assure that dynamically revealed content is visible after scrolling in an iframe on ipad / iOS5.

Oh Iframes and iPad - what a wonderful old chesnut you are. I know that:

  • iPad expands iframes to the full height of the content within it (almost like it was using HTML5's "seamless" property, but not quite since it doesn't inherit styles or events from the parent). Bizarre, annoying to many, but true.
  • <iframe height="100%"> is therefore useless since it sizes to its content not to the container

  • I need to wrap my iframe in a div - a la

    <div id="wrapper" style="-webkit-overflow-scrolling:touch;overflow:auto;">
<iframe width="100%" height="100%" src="about"blank"></iframe>
</div>

  • or else introduce some trickery to set the scroll position of the frame (which I think is based on tricks mentioned in this article)

My issue is that content that is dynamically shown inside the iframe body (e.g. jquery tabs, accordion, etc) may cause the browser to crop the content at the display extent of the page.

E.g. if my "tabs" are most of the way down the visible viewport inside the iframe and I perform a two-finger scroll (or implement the one finger scrollTop hack) then after that content is scrolled into view, some of its content that was previously not drawn remains undrawn. Clicking to a second tab / back again causes the content to appear as if the page doesn't draw off-screen content. After this, if I then scroll back up to the top of the page the content isn't drawn for the start of the page (which was previously visible). Scrolling the page up and down a few times with a two-finger scroll resolves the issue.

I had read this article that stated that the problem was fixed. But it doesn't seem to be fully fixed; and still doesn't get around the issue that because you have to wrap your iframe in a div and put scrollbars on that div, desktop browsers may show a double scrollbar depending on how they interpret overflow:auto.

p.s. I'm using HTML5 boilerplate page both inside and outside the iframe, with the correct meta viewport settings.

Community
  • 1
  • 1
frumbert
  • 2,323
  • 5
  • 30
  • 61
  • Did you find any solution meanwhile? Facing the same problem on my platform I am working on... – YvesR May 14 '12 at 11:16
  • 2
    I found that trying the use of the XHTML1.1 compliant tag instead of an – frumbert May 15 '12 at 01:32
  • Try this: http://stackoverflow.com/questions/10805301/how-can-i-scroll-an-iframe-in-ios-4-with-2-fingers/10807318#10807318 Basically you don't want to scroll the iframe at all but rather a wrapper div inside the framed-in page. – Charlie Schliesser May 29 '12 at 22:03
  • You can try the solution here http://stackoverflow.com/a/18699378/768685 – Ali Ok Sep 09 '13 at 13:33

3 Answers3

2

I found I was also able to solve the problem by making the document as tall as the iframe content. (As suggested Iframe Content Not Rendering Under Scroll In iOs5 iPad/iPhone) But in my case I didn't want the user to be able to scroll down in the now tall app, because its supposed to be a fullscreen application. I used this code to prevent vertical scrolling:

/*
Prevent Scrolling down.
 */
$(document).on("scroll",function(){
    checkForScroll();
});

var checkForScroll = function(e)
{
    var iScroll = $(document).scrollTop();
    if (iScroll > 1){
        // Disable event binding during animation
        $(document).off("scroll");

        // Animate page back to top
        $("body,html").animate({"scrollTop":"0"},500,function(){
            $(document).on("scroll",checkForScroll);
        });
    }
}

I evaluated a lot of options and wrote this blog post, including test code. http://dev.magnolia-cms.com/blog/2012/05/strategies-for-the-iframe-on-the-ipad-problem/

Hope this helps, Topher

Community
  • 1
  • 1
topherzee
  • 21
  • 3
  • 6
    Be careful when posting copy and paste boilerplate/verbatim answers to multiple questions, these tend to be flagged as "spammy" by the community. If you're doing this then it usually means the questions are duplicates so flag them as such instead. – Kev May 18 '12 at 12:47
2

I'm assuming there is a bug in iOS safari in how it treats iframes with defined width / height. Without width / height being defined it tries to scale them automatically to fit their content without any scrolling needed.

The best workaround I've found is to not scroll the iframe at all, but rather to scroll a wrapper div inside the framed-in page.

Here's an example:

<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;">
...all my normal content...
</div>
</body>
</html>
Charlie Schliesser
  • 7,851
  • 4
  • 46
  • 76
  • If this is a bug, it's not just Safari. I've found the same thing in Chrome on at least the iPad 1. – toon81 Jul 01 '14 at 09:19
  • 8
    @toon81 On iPad, in fact iOS devices, Apple forbids third-party browsers. So, the Chrome you see is using iOS Safari's Webkit. – AppleGrew Oct 29 '14 at 05:16
  • I'm pretty sure Chrome is a third-party browser. – toon81 Oct 30 '14 at 09:22
  • 5
    AppleGrew is right. Chrome on iOS is only permitted to be a wrapper for Webkit. http://stackoverflow.com/questions/11259152/chrome-ios-is-it-just-a-uiwebview – Chris Rae Nov 29 '14 at 05:26
-5

This is a very tedious problem, especially if you are in a scenario where you must use a dynamically scaling iframe, in my case with the YouTube iframe API. You are not able to control the scroll properties of the iframe. It doesn't even work if you modify the iframe elements in the ios simulator/safari debug window.

The best solution that I found was to use negative positioning to remove the excess whitespace. Android may have mixed results so you have to use browser detection and apply that way.

imakeinterfaces
  • 1