New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

iframe scrolling on iOS device #2

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

Comments

Projects
None yet
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

This comment has been minimized.

Show comment
Hide comment
@fancyapps

fancyapps Nov 22, 2011

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.

Owner

fancyapps commented Nov 22, 2011

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

This comment has been minimized.

Show comment
Hide comment
@it-can

it-can Nov 25, 2011

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

it-can commented Nov 25, 2011

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

@fancyapps

This comment has been minimized.

Show comment
Hide comment
@fancyapps

fancyapps Nov 26, 2011

Owner

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

Owner

fancyapps commented Nov 26, 2011

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

@jannejava

This comment has been minimized.

Show comment
Hide comment
@jannejava

jannejava Dec 20, 2011

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;
}

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

This comment has been minimized.

Show comment
Hide comment
@fancyapps

fancyapps Dec 20, 2011

Owner

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

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

fancyapps commented Dec 20, 2011

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

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

This comment has been minimized.

Show comment
Hide comment
@jannejava

jannejava Dec 20, 2011

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

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

@it-can

This comment has been minimized.

Show comment
Hide comment
@it-can

it-can Dec 20, 2011

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

it-can commented Dec 20, 2011

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

@fancyapps

This comment has been minimized.

Show comment
Hide comment
@fancyapps

fancyapps Dec 20, 2011

Owner

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

2011/12/20 M. Vugteveen <
reply@reply.github.com

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

Owner

fancyapps commented Dec 20, 2011

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

2011/12/20 M. Vugteveen <
reply@reply.github.com

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

This comment has been minimized.

Show comment
Hide comment
@fancyapps

fancyapps Mar 21, 2012

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>
Owner

fancyapps commented Mar 21, 2012

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

This comment has been minimized.

Show comment
Hide comment
@alexjeen

alexjeen Apr 5, 2012

This is the fix:

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

alexjeen commented Apr 5, 2012

This is the fix:

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

This comment has been minimized.

Show comment
Hide comment
@fancyapps

fancyapps Apr 25, 2012

Owner

Latest version should have proper iframe scrolling for iOS5

Owner

fancyapps commented Apr 25, 2012

Latest version should have proper iframe scrolling for iOS5

@fancyapps fancyapps closed this Apr 25, 2012

@rossb

This comment has been minimized.

Show comment
Hide comment
@rossb

rossb 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.

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

This comment has been minimized.

Show comment
Hide comment
@fancyapps

fancyapps May 8, 2012

Owner

See issue #154

Owner

fancyapps commented May 8, 2012

See issue #154

@rossb

This comment has been minimized.

Show comment
Hide comment
@rossb

rossb 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).

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

This comment has been minimized.

Show comment
Hide comment
@fancyapps

fancyapps May 10, 2012

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.

Owner

fancyapps commented May 10, 2012

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

This comment has been minimized.

Show comment
Hide comment
@rossb

rossb 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.

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

This comment has been minimized.

Show comment
Hide comment
@charlie-s

charlie-s May 29, 2012

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 - 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

This comment has been minimized.

Show comment
Hide comment
@rossb

rossb 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).

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

This comment has been minimized.

Show comment
Hide comment
@charlie-s

charlie-s May 30, 2012

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.

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.

@RubyLouvre RubyLouvre referenced this issue in RubyLouvre/avalon Oct 1, 2013

Closed

添加触摸事件的支持 #85

@pk1u pk1u referenced this issue in ionic-team/ionic Apr 29, 2014

Closed

iframe content scroll issue #1151

@thinsoldier thinsoldier referenced this issue in dimsemenov/Magnific-Popup Oct 20, 2014

Open

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

@ToonSpin

This comment has been minimized.

Show comment
Hide comment
@ToonSpin

ToonSpin 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!

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