Skip to content

iframe scrolling on iOS device #2

Closed
nicjohnson opened this Issue Nov 21, 2011 · 21 comments

8 participants

@nicjohnson

When I try the iframe example at http://fancyapps.com/fancybox/#examples on an iPad, I can't get the content to scroll (using one, two, or more fingers). Do you know why this is?

@fancyapps
Owner

This looks like a webkit bug that affects mobile safari and others (dolphin for samsung, etc)

There are some discussions about this - http://css-tricks.com/forums/discussion/11946/scrolling-iframe-on-ipad/p1 but no good solution.

@it-can
it-can commented Nov 25, 2011

yeah this is a real problem... wish there was a solution...

@fancyapps
Owner

Could someone try testing using "-webkit-overflow-scrolling:touch" on iPad? (I don`t own but might buy one for testing)

@jannejava

Changed to this and it works on Ajax/inline but could not make it work with iframes, unfortunately

.fancybox-wrap {
position: absolute;
top: 0;
left: 0;
z-index: 1002;
-webkit-overflow-scrolling:touch;
}

@fancyapps
Owner

What if you also add this CSS snippet? (I can`t test myself)

 .fancybox-iframe {
    overflow: auto;
    -webkit-overflow-scrolling:touch;
}
@jannejava

No, I cannot make it work with Iframes and the above snippet. The scrolling only affects the overlayed content behind the lightbox.

@it-can
it-can commented Dec 20, 2011

this is a bug with iOS I think... anyone can test it on an other mobile device?

@fancyapps
Owner
@fancyapps
Owner

Very challenging, but latest commit has support for iOS5 iframe scrolling. Unfortunately, scrollbars sometimes do not appear. Take for example this simple test, sometimes it works nice but sometimes page has to be refreshed few times before scrollbars appear -

<body>
    <div style="width:200px;height:200px;overflow: scroll;-webkit-overflow-scrolling:touch;">
        <iframe frameborder="0" hspace="0" class="fancybox-iframe" src="iframe.php" ></iframe>
    </div>
    ...
</body>
@alexjeen
alexjeen commented Apr 5, 2012

This is the fix:

  .fancybox-inner {
    -webkit-overflow-scrolling: touch !important;
    overflow: scroll !important;
  }
@fancyapps
Owner

Latest version should have proper iframe scrolling for iOS5

@fancyapps fancyapps closed this Apr 25, 2012
@rossb
rossb commented May 8, 2012

This issue isn't fully fixed. If you increase the iframe.html text content included in the demo folder to activate scrolling, iOS 5 now scrolls the full height of the iframe correctly with one finger, however towards the bottom of the iframe the content cuts off, so text cuts off midline (if the content is text, for example) and the remaining bottom part of the iframe shows as plain white.

@fancyapps
Owner

See issue #154

@rossb
rossb commented May 9, 2012

Thanks for the reference.

Just as a note, I've done loads of testing into this issue over the last few days and there's a bunch of bugs introduced when loading complex pages into an iframe with this workaround (wrapping the iframe with a div), even with the body height hack referenced in #154. The main other glitch is serious screen redraw/flickering issues (and not just on pages with animation).

I've found a better solution is to load the iframe with a fixed height and no overflow set, then within the iframe HTML use a container stretched to 100% width and height and overflow: auto (and -webkit-overflow-scrolling: touch; if you want native scrolling). This gives a much more stable solution that avoids almost all glitches on iOS 5 and needs no other hacks. Don't know if this is feasible for fancybox or not (guess it would have to be an iframe within an iframe or something).

@fancyapps
Owner

After spending few days trying to find best workaround for iOS bugs, I finally gave up. This reminds me struggling with IE6. Maybe later I will give it another try.

@rossb
rossb commented May 10, 2012

Totally agree with the IE6 comparison, I'm amazed at how buggy iOS 5 Webkit is (and how more of an issue isn't made out of it). Was tearing my hair out trying to work out why there were so many random bugs on my pages (seemingly unrelated to iframe) until I switched to the above solution.

@charlie-s

rossb - your comment saved the day. It's much easier to control overflowed divs than it is iframes, and the scrolling + blank content issues are working all the way back to iOS 4, where previously I wasn't even able to get the 2 finger scrolling to work (in iframes).

It goes something like this:
<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;">
...
</div>
</body>
</html>

@rossb
rossb commented May 30, 2012

csdco - glad to hear it helped! Yeah, every other workaround I tried had problems, but overflowed div support in itself seems rock solid on iOS (even going back to v4 like you say), and including within the iframe does seem to effectively nullify the problem.

It looks like iOS Webkit applies special properties to iframes that don't have fixed heights (perhaps in order to auto-expand the height) and this opens up a can of worms (or bugs rather).

@charlie-s

The auto-expanding iframe seems a likely culprit. To those that may stumble upon this – if you don't set width/height parameters for an iframe, iOS webkit will resize it to fit its content. This is probably not ideal in most cases.

Anyways, this method has got to be a best practice kind of thing. I don't think it can be included in any way in Fancybox (outside of documentation maybe?) since it requires that the framed in content be wrapped in a div properly.

@ToonSpin
ToonSpin commented Feb 4, 2015

As a heads up, the above comment fixed this issue for me a while ago, but this morning I found that it had cropped up again on at least iOS 7 in Chrome.

Turns out the overflow: auto; in the wrapper div was the key. The overflow wasn't doing its job properly because all of the div's children had position:absolute.

In the end, what solved this for me was adding position: relative to the div's style attribute, so the source of the example a-file.html becomes:

<html>
<body>
<div id="wrapper" style="width: 100%; height: 100%; overflow: auto; position: relative; -webkit-overflow-scrolling: touch;">
...
</div>
</body>
</html>

Unfortunately, this broke the site in Internet Explorer 9, possibly also older versions, haven't checked those. IE 10 and 11 seem to work fine. I tested all of this with the F12 tools in Internet Explorer 11. So as an additional heads-up: if you need to support IE9, you'll need to work around this.

Hopefully this can help others with the same problem I had this morning. Thanks @rossb and @csdco for your trouble!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.