jQuery Colorbox, iframe content not scrolling in iPad

Question

Colorbox iframe content does not scroll when viewed on iPad please read below:

https://github.com/jackmoore/colorbox/issues/41#issuecomment-5244379

When displaying a web page that is larger than the dimensions set for the colorbox from an Ipad, the ability to scroll is disabled and/or does not exist.

Some might suggest one finger or two fingered scrolling, this does not work.

Pre-reqs: Own an Ipad, or go down to local best buy

Steps to reproduce: Go to http://colorpowered.com/colorbox/core/example1/index.html Click on Outside Webpage (Iframe) link, Enter something into the Google Search

Results: You are unable to scroll through the results.

Is there a fix for this? Is there something in the works to fix this issue? BTW, this works fine on IE, Chrome, and Firefox.

Any body got a work around for this??? any help would be greatly appreciated.

Answer 1

UPDATE - AUTHOR FIXED ISSUE

Apparently Jack has fixed this issue as of today (4th Feb 2013). It's worth taking the latest release from his Github page.

---

Previous Solution

OK, I couldn't get jScrollPane working properly. That's not to say you won't, but I was also using custom resizing to resize the iframe and I don't think it was playing well with jScrollPane's dimensions calculations.

Solution

I did, however, manage to get it working thanks to a solution to the more general iOS iframe scroll issue, thanks to Sharon here on stackoverflow. I have made a couple of tweaks to her code to play nicer with colorbox. Please note that this only works where you control the iframe content

Simply put the following code into your iframe:

setTimeout(function () {
    var startY = 0;
    var startX = 0;
    var b = document.body;
    b.addEventListener('touchstart', function (event) {
        startY = event.targetTouches[0].screenY;
        startX = event.targetTouches[0].screenX;
    });
    b.addEventListener('touchmove', function (event) {
        event.preventDefault();
        var posy = event.targetTouches[0].screenY;
        var h = parent.document.getElementById("cboxLoadedContent");
        var sty = h.scrollTop;

        var posx = event.targetTouches[0].screenX;
        var stx = h.scrollLeft;
        h.scrollTop = sty - (posy - startY);
        h.scrollLeft = stx - (posx - startX);
        startY = posy;
        startX = posx;
    });
}, 1000);

The scrolling is not jittery, although you don't have the gradual slowdown of native scrolling, it just stops when you lift your finger. Plus, there's no scrollbar. Other than that it's a perfect solution.

The page with Sharon's solution offers an alternative to try for scenarios where you don't control the iframe.

Answer 2

I just have done this, in my general css I have add #cboxLoadedContent{-webkit-overflow-scrolling: touch;}

Then, in my views opened by colorbox, I have added to the css the following style body{-webkit-transform:translate3d(0, 0, 0);}

This works on iPad and iPhone.

Answer 3

Are you in control of your own iframe content, or is it content from an external website i.e. on a different domain? If the latter, I cannot help.

If you're in control of the iframe content you can use the jScrollPane plugin to solve your issue.

The body of your iframe should have CSS overflow:auto, and you need to wrap a div around your iframe content. On ready inside the iframe get the height of the iframe window, set the css height of the wrapper div to be the height of the window (or just a bit less), and then apply jScrollPane to your wrapper div.

$(document).ready(function() {
    var $container = $("#myDiv");
    var $win = $(window);

    if ($container.height() >= $win.height()){
        $container.css({
            'width': $win.width(),
            'height': $win.height()
        });

        $container.jScrollPane();
    }
});