Dragging/flicking not working on iOS 9.3

[Mp4ct]

On iOS 9.3 in Safari the Slider cannot be navigated by dragging/flicking. Only the arrows and dots work.

Test case: https://codepen.io/desandro/pen/azqbop

[RobinBrons]

Yes I have this issue too, I tested it on the docs versions as well (to make sure it wasn't something I did wrong). If anyone has a suggestion it would be appreciated but, it is a very old version and practically no one uses any iOS version below 10 (https://developer.apple.com/support/app-store/).

[desandro]

Given that iOS 9 has very low usage, I am not going to look into this issue. My recommendation is to try using an earlier version of Flickity (2.0.x).

[RobinBrons]

I tried using a lower version but that didn't work either. But since the usage is so low it's practically a non-issue.

[desandro]

A fix has been released with v2.2.0.

[newlands89]

Just wanted to say thank you. I chose this slider because it's lack of open issues and continued support. Today I found the issue with the slider 2.1.2 in IOS 9.3.5, the version of IOS is #3 in my usage statistics, it is a priority for me.

It's rare to get such an easy win in front end dev, I feel like the luckiest man alive.

[desandro]

@newlands89 Thanks so much for the kind words. Its not often that people follow up to say thank you. That means a lot.

[ivanferrer]

Try add implement to fix: -webkit-transform:

Flickity.prototype.positionSlider = function() {
                            var x = this.x;
                            // wrap position around
                            if ( this.options.wrapAround && this.cells.length > 1 ) {
                                x = utils.modulo( x, this.slideableWidth );
                                x = x - this.slideableWidth;
                                this.shiftWrapCells( x );
                            }

                            x = x + this.cursorPosition;
                            // reverse if right-to-left and using transform
                            x = this.options.rightToLeft ? -x : x;
                            var value = this.getPositionValue( x );
                            // use 3D tranforms for hardware acceleration on iOS
                            // but use 2D when settled, for better font-rendering
                            this.slider.style.transform = this.isAnimating ?
                                'translate3d(' + value + ',0,0)' : 'translateX(' + value + ')';
                            this.slider.style['-ms-transform'] = this.isAnimating ?
                                'translate3d(' + value + ',0,0)' : 'translateX(' + value + ')';
                            this.slider.style['-webkit-transform'] = this.isAnimating ?
                                'translate3d(' + value + ',0,0)' : 'translateX(' + value + ')';
                            this.slider.style['-moz-transform'] = this.isAnimating ?
                                'translate3d(' + value + ',0,0)' : 'translateX(' + value + ')';
                            this.slider.style['-o-transform'] = this.isAnimating ?
                                'translate3d(' + value + ',0,0)' : 'translateX(' + value + ')';

                           var firstSlide = this.slides[0];
                            if ( firstSlide ) {
                                var positionX = -this.x - firstSlide.target;
                                var progress = positionX / this.slidesWidth;
                                this.dispatchEvent( 'scroll', null, [ progress, positionX ] );
                            }

}