Swipe horizontal not working on all elements (mobile only)

[Linzdigr]

I use a v-touch component as a container to act on the swipeleft an swiperight event and it works as expected on desktop view.
But when switching on mobile, only some child elements seems to listen to.

Here is the code below (Vuejs 2.1.10 & vue-touch 2.0.0-beta.4):

import VueTouch from 'vue-touch'

VueTouch.config.swipe = {
    direction: 'horizontal'
}

Vue.use(VueTouch, {name: 'v-touch'})

// ... and in the template:

<v-touch v-on:swipeleft="onSwipeRight2Left" v-on:swiperight="onSwipeLeft2Right">
     // The page content
</v-touch>

Am I missing something?

[xiaoTuiMao]

+1

[LinusBorg]

Seems like a hammerjs problem really ...

[nbursa]

I noticed that v-touch in some situations(depending on your content positioning) do not cover the whole screen but wraps its content, this could be the case. When you swipe you could "miss" v-touch surface and nothing will happen as it is not working.
This could help to test that if not solve:

1. Make v-touch component empty sibling element to its content.
2. Position it absolutely full screen and add CSS pointer-events: none
3. Add to it tap event listener and toggle hide only on tap
4. On underlying content add CSS pointer-events: all and toggle show v-touch on tap.