iframe scrolling on iOS device #2

nicjohnson · 2011-11-21T22:13:26Z

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 · 2011-11-22T11:16:16Z

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 · 2011-11-25T23:58:02Z

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

it-can · 2011-11-26T00:21:53Z

what about this?

http://stackoverflow.com/q/8214891

http://www.lemon8.nl/ipads-and-iframe-scrolling/

fancyapps · 2011-11-26T20:39:30Z

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

jannejava · 2011-12-20T13:19:20Z

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 · 2011-12-20T13:37:11Z

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

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

jannejava · 2011-12-20T14:10:43Z

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

it-can · 2011-12-20T14:14:37Z

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

fancyapps · 2011-12-20T14:31:11Z

I can`t scroll ANY iframe using Dolphin browser on my phone.

2011/12/20 M. Vugteveen <
[email protected]

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

Reply to this email directly or view it on GitHub:
#2 (comment)

Janis Skarnelis
fancyapps.com

fancyapps · 2012-03-21T11:37:11Z

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 · 2012-04-05T13:01:46Z

This is the fix:

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

fancyapps · 2012-04-25T16:04:04Z

Latest version should have proper iframe scrolling for iOS5

rossb · 2012-05-08T13:19:14Z

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 · 2012-05-08T13:20:59Z

See issue #154

rossb · 2012-05-09T17:47:03Z

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 · 2012-05-10T06:52:19Z

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 · 2012-05-10T11:57:11Z

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 · 2012-05-29T21:56:45Z

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 · 2012-05-30T11:43:06Z

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 · 2012-05-30T13:40:40Z

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 · 2015-02-04T10:07:59Z

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!

Schepp mentioned this issue Jan 6, 2012

Need an event to fire only when close is user initiated #88

Closed

fancyapps closed this as completed Apr 25, 2012

epavlov mentioned this issue Apr 24, 2013

ASP.NET Button within Fancybox won't post back. #567

Closed

RubyLouvre mentioned this issue Oct 1, 2013

添加触摸事件的支持 RubyLouvre/avalon#85

Closed

pk1u mentioned this issue Apr 29, 2014

iframe content scroll issue ionic-team/ionic-framework#1151

Closed

thinsoldier mentioned this issue Oct 20, 2014

Popup height changes after load on iOS 8 / Safari dimsemenov/Magnific-Popup#558

Open

fancyapps mentioned this issue Feb 27, 2017

Put div with link in fancybox title #797

Closed

Graphicfort mentioned this issue Sep 17, 2017

Grouping will not work without using data-fancybox (almost fixed) #1632

Closed

vonhaupt01 mentioned this issue Jul 26, 2020

Image behavior with a start gallery button #2495

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

iframe scrolling on iOS device #2

iframe scrolling on iOS device #2

nicjohnson commented Nov 21, 2011

fancyapps commented Nov 22, 2011

it-can commented Nov 25, 2011

it-can commented Nov 26, 2011

fancyapps commented Nov 26, 2011

jannejava commented Dec 20, 2011

fancyapps commented Dec 20, 2011

jannejava commented Dec 20, 2011

it-can commented Dec 20, 2011

fancyapps commented Dec 20, 2011

fancyapps commented Mar 21, 2012

alexjeen commented Apr 5, 2012

fancyapps commented Apr 25, 2012

rossb commented May 8, 2012

fancyapps commented May 8, 2012

rossb commented May 9, 2012

fancyapps commented May 10, 2012

rossb commented May 10, 2012

charlie-s commented May 29, 2012

rossb commented May 30, 2012

charlie-s commented May 30, 2012

ToonSpin commented Feb 4, 2015

iframe scrolling on iOS device #2

iframe scrolling on iOS device #2

Comments

nicjohnson commented Nov 21, 2011

fancyapps commented Nov 22, 2011

it-can commented Nov 25, 2011

it-can commented Nov 26, 2011

fancyapps commented Nov 26, 2011

jannejava commented Dec 20, 2011

fancyapps commented Dec 20, 2011

jannejava commented Dec 20, 2011

it-can commented Dec 20, 2011

fancyapps commented Dec 20, 2011

fancyapps commented Mar 21, 2012

alexjeen commented Apr 5, 2012

fancyapps commented Apr 25, 2012

rossb commented May 8, 2012

fancyapps commented May 8, 2012

rossb commented May 9, 2012

fancyapps commented May 10, 2012

rossb commented May 10, 2012

charlie-s commented May 29, 2012

rossb commented May 30, 2012

charlie-s commented May 30, 2012

ToonSpin commented Feb 4, 2015