Swiper: Swiper not transitioning using Touchscreen on Windows 10 in Chrome.

[pmascis]

This is a (multiple allowed):

• [x] bug
• [ ] enhancement
• [ ] feature-discussion (RFC)

• Swiper Version: 6.0.4
• Platform/Target and Browser Versions:
  Windows 10. Touch Screen (Dell XPS 15). Chrome Version 84.0.4147.89

What you did

Attempt to change slides using a touch screen in Windows 10 in Chrome.

Expected Behavior

Slider should translate to the next slide.

Actual Behavior

Swiper does not change between slides.
When the screen is first touched to swipe a direction it immediate appears to start to transition but then gets stuck in place mid transition.
Moving the mouse over the slider then transitions the slides left / right as if the mouse button is being held down.

I don't believe this is an issue specific to my project as this issue can also be replicated using the top swiper on https://swiperjs.com/

Note:
Works in Firefox 78.0.2
This wasn't an issue in my old 5.2.1 version.

[pixelplant]

Same problem in Opera, on Windows 10, on a Lenovo Yoga 920 with touchscreen.
We just switched from the latest v4 to 6.0.4 and discovered this bug.

[nbiada]

Same problem on big touchscreen (totem) based on Windows 10 with Chrome.
Same problem on Surface (Chrome & Edge Chromium).

It works on 5.3.8
https://unpkg.com/[email protected]/js/swiper.min.js
other versions don't work

[andrey-yumasoft]

I've managed to find a workaround:

Set simulateTouch = false in config for touch enabled devices. You can use modernizr to detect touch capability.
I've ended up with something like

function touchCapable() {
    return (
      'ontouchstart' in window||
      (window.DocumentTouch && document instanceof window.DocumentTouch) ||
      navigator.maxTouchPoints > 0 ||
      window.navigator.msMaxTouchPoints > 0
    );
  };

swiperConfig = {
 simulateTouch : !touchCapable()
}

Then apply this CSS:
html, body { overscroll-behavior: none; }

[lyhlg]

thanks for your comment. It is works for me.😬

[pmascis]

Thanks @andrey-yumasoft, that's not bad.
Unfortunately implementing this still has the problem of one working whilst the other doesn't.
i.e. Now I can't click/drag my mouse to move between slides anymore.

@nolimits4web
Any ideas? Are you able to assist, thanks!
I think this may be the same issue as #3772

On a side note, I didn't know about overscroll-behavior, that is great thanks :)

[matadorhernan]

Thanks @andrey-yumasoft, that's not bad.
Unfortunately implementing this still has the problem of one working whilst the other doesn't.
i.e. Now I can't click/drag my mouse to move between slides anymore.

@nolimits4web
Any ideas? Are you able to assist, thanks!
I think this may be the same issue as #3772

On a side note, I didn't know about overscroll-behavior, that is great thanks :)

@pmascis you need to fall back to a 5.3 release and it will be back to normal, if you spot the issue between versions you can just do a pull req i guess, I havent found it tho.

[paultuckey]

Same problem for me. On Windows Edge 86 "mouse click and drag" works, however "finger on the touchscreen" did not.

After some debugging I noticed that the pointermove and pointerup events weren't being fired, to fix I added touch-action: none to ensure the browser allows capturing those events:

    .swiper-slide {
        touch-action: none;
    }

https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

[pmascis]

Doing a quick test by adding that within Chrome dev tools on swiper.js.com home page seems to work for me. I will test fully with my previous project a bit later on.
Thanks @paultuckey !

[mathijshendrikx]

@paultuckey this fixes it partially. You are no longer able to scroll up and down a page if your touch event starts on a swiper instance.

This issue only exists when the device has a touch screen and a mouse or touchpad.

[paultuckey]

@mathijshendrikx this is a problem for my code also. I was able to fix it by adding touch-action: pan-y; to the div inside my .swiper-slide that allowed vertical scrolling.

[wbbhacker]

I combined the results of the people above and it worked