Jquery accordion collpasing on mobile scroll

Question

I'm using this accordion-style plugin to expand and collapse content under each row of a grid, like google images.

Everything works fine on my compter, but when you view this on an iOS device, the expanded content collapses when you scroll. You can see the problem in the link above if you check it on your iOS device. (The problem may exist in Android too, but I don't have access to that device.)

The scrolling problem is caused by this resize function:

    // adjust colio viewport height on window resize
    $(window).bind('resize orientationchange', function(e){

        // stop propagation if colio is event target
        if(e.target === self.markup.get(0)) {
            e.stopImmediatePropagation();
        }

        // for 'inside' placement hide viewport immediately on resize
        if(self.settings.placement === 'inside' && /^(smart)?resize$/.test(e.type)) {
            self.insideHideViewport();
        }

        // disable page scroll during window resize
        if(!self.temp) {
            self.temp = [self.settings.syncScroll, self.settings.scrollPage];
        }
        self.settings.syncScroll = true;
        self.settings.scrollPage = false;

        // adjust viewport height
        clearTimeout(self.resize_timer);
        self.resize_timer = setTimeout(function(){
            self.expandViewport(self.active_id, true);
            self.settings.syncScroll = self.temp[0];
            self.settings.scrollPage = self.temp[1];
            delete self.temp;
        }, 200);

    });

More specifically, the problem seems to be with this line only:

// for 'inside' placement hide viewport immediately on resize
            if(self.settings.placement === 'inside' && /^(smart)?resize$/.test(e.type)) {
                self.insideHideViewport();
            }

If I remove that part only, it fixes it. But the problem is, I am using 'inside' placement, so this code is necessary for hiding the expanded div when you resize your browser or change the orientation of your device. Otherwise it looks wonky because the height calculations are off.

It seems to be treating mobile scrolling as if it were a window resize.

Can you see a way to modify this code to maintain the hide-on-resize functionality, while fixing the problem caused when scrolling on mobile?

Answer 1

The problem is that iOS scrolling triggers the resize event. I found a solution here: iphone/ipad triggering unexpected resize events

I wrapped the offending lines of code in a check to see if the actual width of the screen had changed. Here is my revised code:

     // Store the window width
    var windowWidth = $(window).width();

    // adjust colio viewport height on window resize
    $(window).bind('resize orientationchange', function(e){

        // stop propagation if colio is event target
        if(e.target === self.markup.get(0)) {
            e.stopImmediatePropagation();
        }

        // Check window width has actually changed and it's not just iOS triggering a resize event on scroll
    if ($(window).width() != windowWidth) {

        // Update the window width for next time
        windowWidth = $(window).width();

        // for 'inside' placement hide viewport immediately on resize
        if(self.settings.placement === 'inside' && /^(smart)?resize$/.test(e.type)) {
            self.insideHideViewport();

        }

    }
        // disable page scroll during window resize
        if(!self.temp) {
            self.temp = [self.settings.syncScroll, self.settings.scrollPage];
        }
        self.settings.syncScroll = true;
        self.settings.scrollPage = false;

        // adjust viewport height
        clearTimeout(self.resize_timer);
        self.resize_timer = setTimeout(function(){
            self.expandViewport(self.active_id, true);
            self.settings.syncScroll = self.temp[0];
            self.settings.scrollPage = self.temp[1];
            delete self.temp;
        }, 200);

    });