hammer.js dragging not start 'till finger stop on ipad screen

Question

Dragging with hammer.js works on browser on pc. It fires continuously but when it comes to iPad, there is little problem. It fires after dragging/swiping finger stops on screen

template

<v-sheet v-pan="onPan">
    <div class="vista__img" ref="image" :style="{ backgroundImage: 'url(' + vista.image + ')' }"></div>
</v-sheet>

directives

 directives:{
    pan: {
      bind: function(el, binding) {
        if (typeof binding.value === "function") {
          const mc = new Hammer(el);
          mc.get("pan").set({ direction: Hammer.DIRECTION_ALL });
          mc.on("pan", binding.value);
        }
      }
    },

methods && computed

 methods:{
   onPan(e) {
      
      const dragOffset = -100 / this.itemWidth * e.deltaX / this.overflowRatio;
      const transform = this.currentOffset + dragOffset;
    
      this.$refs.image.style.setProperty("--x", transform);
    
      if (e.isFinal) {
        this.currentOffset = transform;
        const maxScroll = 100 - this.overflowRatio * 100;
        let finalOffset = this.currentOffset;     
      }
    },
  }

  computed: {
    overflowRatio() {
            return this.$refs.image.scrollWidth / this.$refs.image.offsetWidth;
        },
        itemWidth() {
            return this.$refs.image.scrollWidth;
    },
  },

Any idea about handling drag continuously on iPad?

AND this problem only occurs on iPad browsers(safari, chrome), there is no problem on iPhone

Answer 1

Your issue can be related to a phenomenon called event propagation. iOS handles it a little bit differently than other systems (yes, it's system-specific, not browser-specific and Peter-Paul Koch wrote an article about it).

If you want to get a little bit of background, javascript.info has a great, extensive article about bubbling and capturing.

And if you just want to solve the problem, here's an issue on GitHub that should help. Also, hammer.js documentation mentions it as well.