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.

score 6 · Answer 1 · edited May 23 '17 at 12:12

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.

Have you ran into any issues with this? I am currently trying this out with an iframed colorbox and it works, but on longer pages as I'm scrolling, the whole colorbox kind of jumps to the side. If I keep moving, it will reset itself and the scroll will jump back to the top. — Keith, Nov 01 '12 at 18:32
I haven't ran into that issue as my pages are not particularly long. — Ian Stanway, Nov 26 '12 at 13:46

score 1 · Answer 2 · answered Jan 22 '13 at 11:32

1

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.

answered Jan 22 '13 at 11:32

j.avi

53
5

I just tried this and found that it worked the first time but after that it broke the colorbox. Not sure if you had the same result. – stringy Jan 23 '13 at 06:43
I have detect a bug, It works always but, if you touch out of the colorbox and do the scroll over the web (not into de colorbox), the close button fails. – j.avi Jan 25 '13 at 11:22

score 0 · Answer 3 · answered Jun 27 '12 at 16:16

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

jQuery Colorbox, iframe content not scrolling in iPad

3 Answers3

UPDATE - AUTHOR FIXED ISSUE

Previous Solution

Solution

Linked