Swiper: Touch drag no longer works (possible bug)

Created on 21 May 2020  路  7Comments  路  Source: nolimits4web/swiper

Hi

Using version 5.3.8 with a simple scroller of a few slides and the cube effect, I can successfully manually change slides as expected by dragging on a touch screen (A HP PC). If I update to 5.4.0 or 5.4.1 whilst I can still trigger a transition via the API, when I drag the swioer, it moves a very small amount and "sticks".

(I set direction, effect and speed from vars)

 swipers[data.block_id] = new Swiper ('#' + data.block_id + ' > .swiper-container', {
    // Optional parameters
    direction: direction,
    'effect' : effect,
    'speed' : speed,
    //'roundLengths' : true,
    pagination: {
        el: '.swiper-pagination_' + data.block_id,
    },
    coverflowEffect: {
        rotate: 60,
        slideShadows: false
    },
    flipEffect: {
        rotate: 30,
        slideShadows: false
    },
    cubeEffect: {
        slideShadows: false,
        shadow: showShadow
    },
    loop: true,
});

Most helpful comment

I think it's to do with the change "Simplify touch events detection" (https://github.com/nolimits4web/swiper/commit/11dcfe55bd5bcee62fc1c89da37ca4a607c80b0f)

It looks like there has been an attempt to simplify detection of "touch" support, however the way it's been changed will break most desktop/tablet use cases.

The newer code uses either:

  • 'ontouchstart' in window => this has been deprecated and taken out of Chrome for ages (https://www.chromestatus.com/feature/4764225348042752)
  • DocumentTouch => this has been removed from the standards and shouldn't be used either (https://developer.mozilla.org/en-US/docs/Web/API/DocumentTouch)

The old method checks for "window.navigator.maxTouchPoints", which (at least on Windows desktop/tablets) will function correctly.

This commit needs reverting.

All 7 comments

Can confirm, touch drag is not working on demos.

Windows 10
Chrome Version 83.0.4103.97
Edge Version 83.0.478.45
No issues on Firefox

Also can confirm, not working on demos.

Windows 10
Chrome Version 83.0.4103.116
In Firefox 78.0.1 having trouble with vertical swiping. Horizontal works fine.

CSS scrolling demo works fine for both.

Same here

Same here, it works on chrome android but not on windows.

I think it's to do with the change "Simplify touch events detection" (https://github.com/nolimits4web/swiper/commit/11dcfe55bd5bcee62fc1c89da37ca4a607c80b0f)

It looks like there has been an attempt to simplify detection of "touch" support, however the way it's been changed will break most desktop/tablet use cases.

The newer code uses either:

  • 'ontouchstart' in window => this has been deprecated and taken out of Chrome for ages (https://www.chromestatus.com/feature/4764225348042752)
  • DocumentTouch => this has been removed from the standards and shouldn't be used either (https://developer.mozilla.org/en-US/docs/Web/API/DocumentTouch)

The old method checks for "window.navigator.maxTouchPoints", which (at least on Windows desktop/tablets) will function correctly.

This commit needs reverting.

Any update on this? It's a fairly serious bug.

Duplicate of #3728

Was this page helpful?
0 / 5 - 0 ratings