New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

swipe not working on iPhone running iOS 10 #2677

Open
embj69 opened this Issue Jan 3, 2017 · 15 comments

Comments

Projects
None yet
@embj69

embj69 commented Jan 3, 2017

short description of the bug / issue, provide more detail below.
The carousel works on all platforms and devices. The only exception is the swipe on an iPhone running iOS 10. QAed the carousel on an iPhone running iOS 9.2 and the swipe works.

====================================================================

no code added since the issue is device and OS specific

====================================================================

Steps to reproduce the problem
On an iPhone running iOS 10:

  1. Go to site and page
  2. Swipe carousel, but arrows works

====================================================================

What is the expected behaviour?

The swipe function moves the carousel left or right.

====================================================================

What is observed behaviour?

====================================================================

More Details

  • Which browsers/versions does it happen on?
  • Which jQuery/Slick version are you using?
  • Did this work before?
@kenwheeler

This comment has been minimized.

Show comment
Hide comment
@kenwheeler

kenwheeler Jan 3, 2017

Owner

Are you getting errors in your console? I just tried the slick homepage on ios10 and had no problem. Does http://kenwheeler.github.io/slick work for you?

Owner

kenwheeler commented Jan 3, 2017

Are you getting errors in your console? I just tried the slick homepage on ios10 and had no problem. Does http://kenwheeler.github.io/slick work for you?

@embj69

This comment has been minimized.

Show comment
Hide comment
@embj69

embj69 Jan 3, 2017

I am not getting any errors on the console either on load or when I click to next or previous.

And yes, the site works.

embj69 commented Jan 3, 2017

I am not getting any errors on the console either on load or when I click to next or previous.

And yes, the site works.

@embj69

This comment has been minimized.

Show comment
Hide comment
@embj69

embj69 Jan 4, 2017

Attaching the code that is encountering the issue.
carousel.txt

Just did a test via Xcode Simulator running iOS 10.2, I am replicating the issue on attached page--the demos on your site are working.

embj69 commented Jan 4, 2017

Attaching the code that is encountering the issue.
carousel.txt

Just did a test via Xcode Simulator running iOS 10.2, I am replicating the issue on attached page--the demos on your site are working.

@maayansavir

This comment has been minimized.

Show comment
Hide comment
@maayansavir

maayansavir Feb 5, 2017

I have the same problem. the slick carousel swipe works in all devices but on Iphone with IOS 10 is not.
did you manage to resolve the problem?

maayansavir commented Feb 5, 2017

I have the same problem. the slick carousel swipe works in all devices but on Iphone with IOS 10 is not.
did you manage to resolve the problem?

@shaun-choo

This comment has been minimized.

Show comment
Hide comment
@shaun-choo

shaun-choo Mar 1, 2017

Has there been any further insight on what the cause of this might be? I'm also experiencing the same issue on a project of mine. The samples work fine but for some reason my implementation doesn't. Works great on all other devices though which is very confusing.

shaun-choo commented Mar 1, 2017

Has there been any further insight on what the cause of this might be? I'm also experiencing the same issue on a project of mine. The samples work fine but for some reason my implementation doesn't. Works great on all other devices though which is very confusing.

@maxinacube

This comment has been minimized.

Show comment
Hide comment
@maxinacube

maxinacube Mar 16, 2017

I have a hacky fix for the time being.

I did some debugging in the plugin's JS with no luck - tried logging the event attached to touchstart.slick mousedown.slick or just log in general in the swipeHandler function to see if & where the function fails but no logs came through.

My next step was trying to make sure iOS was seeing touchstart events with slick-slides in general.

I added the following line of JS after my script block initializing Slick. The event is recognized and this line actually makes swiping on iOS work - can't say I know why it helps things along though.

jQuery('.slick-slide').bind('touchstart', function(){ console.log('touchstart') });

maxinacube commented Mar 16, 2017

I have a hacky fix for the time being.

I did some debugging in the plugin's JS with no luck - tried logging the event attached to touchstart.slick mousedown.slick or just log in general in the swipeHandler function to see if & where the function fails but no logs came through.

My next step was trying to make sure iOS was seeing touchstart events with slick-slides in general.

I added the following line of JS after my script block initializing Slick. The event is recognized and this line actually makes swiping on iOS work - can't say I know why it helps things along though.

jQuery('.slick-slide').bind('touchstart', function(){ console.log('touchstart') });

@eschie

This comment has been minimized.

Show comment
Hide comment
@eschie

eschie Apr 3, 2017

@maxinacube Same. Demos work for me just not on my site. Also, setting any kind of event handler on touchstart event causes the slider to work again.

Also noticing that iOS for iphone is recording a mouseevent most of the time while ipad registers proper touchevent. Sometimes the a touchstart event is fired on first swipe and the slider DOES scroll, but after panning the page (and the address bar expands) I can no longer swipe, as iOS only registers mouse events.

eschie commented Apr 3, 2017

@maxinacube Same. Demos work for me just not on my site. Also, setting any kind of event handler on touchstart event causes the slider to work again.

Also noticing that iOS for iphone is recording a mouseevent most of the time while ipad registers proper touchevent. Sometimes the a touchstart event is fired on first swipe and the slider DOES scroll, but after panning the page (and the address bar expands) I can no longer swipe, as iOS only registers mouse events.

@TheGitPanda

This comment has been minimized.

Show comment
Hide comment
@TheGitPanda

TheGitPanda Jun 7, 2017

@maxinacube perfect fix for now. Even adding return true; inside the touchstart event.

At first I thought it was because I hadn't initialised slick inside $(document).ready but that's not the case either.

TheGitPanda commented Jun 7, 2017

@maxinacube perfect fix for now. Even adding return true; inside the touchstart event.

At first I thought it was because I hadn't initialised slick inside $(document).ready but that's not the case either.

@alexandrecanuto

This comment has been minimized.

Show comment
Hide comment
@alexandrecanuto

alexandrecanuto Jun 13, 2017

I can't scroll vertically on iOS 10.1.1, when I reach the section of the page that has the slider. There's a padding of 15px on each side, and the only way I can scroll past this section is by touching on that space, outside de slider itself.

@maxinacube fix doesn't work for me, in this case.

alexandrecanuto commented Jun 13, 2017

I can't scroll vertically on iOS 10.1.1, when I reach the section of the page that has the slider. There's a padding of 15px on each side, and the only way I can scroll past this section is by touching on that space, outside de slider itself.

@maxinacube fix doesn't work for me, in this case.

@ozaark

This comment has been minimized.

Show comment
Hide comment
@ozaark

ozaark Aug 18, 2017

This may be related - on iOS 10 the slider stops working properly if there are css animations applied to .slick-track. In my case I had applied an animation to .slick-track once the page was fully loaded and it worked properly in all browsers/devices except iOS 10 Safari & Chrome (worked fine on iOS 6-9 as well).

Removing the css animation from .slick-track fixed the issue for me.

ozaark commented Aug 18, 2017

This may be related - on iOS 10 the slider stops working properly if there are css animations applied to .slick-track. In my case I had applied an animation to .slick-track once the page was fully loaded and it worked properly in all browsers/devices except iOS 10 Safari & Chrome (worked fine on iOS 6-9 as well).

Removing the css animation from .slick-track fixed the issue for me.

@JSeifBY

This comment has been minimized.

Show comment
Hide comment
@JSeifBY

JSeifBY Sep 28, 2017

This may be due to the .slick-list element (it does not take all the content height)
You can try this :

.slick-list{
  overflow: hidden;
}
.slick-list:after{
  clear: both;
  content: "";
  display: block;
}

JSeifBY commented Sep 28, 2017

This may be due to the .slick-list element (it does not take all the content height)
You can try this :

.slick-list{
  overflow: hidden;
}
.slick-list:after{
  clear: both;
  content: "";
  display: block;
}
@muniir-gopaul

This comment has been minimized.

Show comment
Hide comment
@muniir-gopaul

muniir-gopaul Sep 28, 2017

@JSeifBY, works perfectly fine with your solution and can keep only the :after. Also issue exist on iOS11.

muniir-gopaul commented Sep 28, 2017

@JSeifBY, works perfectly fine with your solution and can keep only the :after. Also issue exist on iOS11.

@SabriRh

This comment has been minimized.

Show comment
Hide comment
@SabriRh

SabriRh Sep 29, 2017

Thnx @JSeifBY , works like a charm :)

SabriRh commented Sep 29, 2017

Thnx @JSeifBY , works like a charm :)

@Sunwha

This comment has been minimized.

Show comment
Hide comment
@Sunwha

Sunwha Feb 26, 2018

@JSeifBY it works. Thank you so much!

Sunwha commented Feb 26, 2018

@JSeifBY it works. Thank you so much!

@omaracrystal

This comment has been minimized.

Show comment
Hide comment
@omaracrystal

omaracrystal Jul 18, 2018

I had the same issue ... what solved it for me though was taking out some custom css. The margin style from the slick-slider itself specifically. What was happening was that the partial slick-slider item was not accessible since the slick-list had the custom style overflow: visible along with a set margin on the slick-list. The config settings value for slidesToShow was set to whole numbers (ie: slidesToShow: 3), however the look of the slick-list was 3.5 (due to the custom margins). When I took out the margins then added in the faction numbers for slidesToShow (achieving the same look ie: slidesToShow: 3.5) this fixed the problem.

omaracrystal commented Jul 18, 2018

I had the same issue ... what solved it for me though was taking out some custom css. The margin style from the slick-slider itself specifically. What was happening was that the partial slick-slider item was not accessible since the slick-list had the custom style overflow: visible along with a set margin on the slick-list. The config settings value for slidesToShow was set to whole numbers (ie: slidesToShow: 3), however the look of the slick-list was 3.5 (due to the custom margins). When I took out the margins then added in the faction numbers for slidesToShow (achieving the same look ie: slidesToShow: 3.5) this fixed the problem.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment