BXSlider 4.1.2 freezes in IOS 7 when swiping

[blasto333]

In IOS 7.1 on iPhone (haven't tested iPad). I am able to reproduce a problem 100% of the time by doing the following:

1. Go to http://blastohosting.com/bxslider_bug
2. scroll down the page, then scroll up
3. Start swiping the bx slider. After 2-3 swipes it will not work anymore and appear frozen

Minimal reproduce code: http://blastohosting.com/bxslider_bug

[CoGDev1]

I'm having a similar issue, it's as if the js runs out of memory or something, although other scripts and js behaviours on the same page still work ok. I'm seeing this on an iPad mini and an iPhone 5C. It's NOT an issue on Android by the looks of it. (tested on Chrome on 4.3 and Firefox on 2.3.5)

More info - it appears to be something to do with the touch-responsiveness within bxslider dying. I've altered my install to use touchSwipe, as described here : http://www.webmasterbulletin.net/2012/03/wordpress-combine-jquery-slider-and-iphone-touch-swipe/1705 and it's slightly better as the vertical scroll of the page isn't prevented when bxslider freezes.

[mcestone4]

This worked for me. Have not been able to freeze it since.

Add the option

preventDefaultSwipeY:true,

[thecodemill]

mcestone4's workaround is fine, but prevents the window from scrolling at all along Y axis when swiping on the slider. If the slider fills a large proportion of the screen, this can become a bigger problem because navigation is prevented even before the bug fires. Would love a fix to this one.

[Corske]

Yeah, same issue. We would love to have a fix for this issue.

[artifex223]

I'm not sure if it is the same issue, but my slider was locking up as well. I found this thread: https://github.com/stevenwanderski/bxslider-4/issues/337

They mentioned that this happens when you swipe vertically, then swipe horizontally without raising your finger. Testing in my circumstance showed that to be the case 100% of the time.

Adding:

slider.working = false;

to setPositionProperty() just after the "transitionend" bind inside the if(type == 'slide) conditional fixed the issue for me (line 551 in version 4.1.2)

[mcestone4]

@artifex223 Do you have any idea where that code would go in the minified version? I tried using the full version and for some reason it is causing me some problems with width detection of the slideshow.

Thanks

[artifex223]

I believe it would be at column 7905, just after

function(){r.unbind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd"),D()})

And in the minified version, it looks like "slider" has been renamed "o", so you'd be inserting "o.working=!1".

You could probably just do a find and replace, swapping

function(){r.unbind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd"),D()})

for

function(){r.unbind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd"),D()}),o.working=!1

I don't have much experience tinkering around in minified JS, but I hope that works for you.

[mcestone4]

@artifex223 your solution worked for me. Thank you so much for your help.

[daviddelusenet]

Used this solution too, doesn't freeze anymore, but still doesn't work correctly. Transitions are broken now.

[daviddelusenet]

How I fixed it: just disable useCSS.

[l337]

@artifex223 Thank you that is the best solution!

[tobiju]

@daviddelusenet: work's for me. Thank you.

[connected]

Just want to share my findings.

First, you can try adding oneToOneTouch: false to the slider options and see if it helps, but this will add a delay on the animation.

Also, as per @artifex223 solution, you can try wrapping it in a timeout function and see how it goes.

if(type == 'slide'){
    // set the property value
    el.css(slider.animProp, propValue);
    // bind a callback method - executes when CSS transition completes
    el.bind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(){
        // unbind the callback
        el.unbind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd');
        updateAfterSlideTransition();
    });

    // Add this
    window.setTimeout(function () {
        slider.working = false;
    }, duration);

}