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

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