Hammerjs not working on Chrome or Safari in IOS (made with Vuejs)

Question

I'm working on an app that has a navdrawer and i added the gesture swipe with hammerjs to close the navdrawer when swiping left, the code looks like this:

<template>
  <nav id="navbar" class="navbar">
    <button @click="toggleNavbar">toggle drawer</button>
    <div class="navdrawer" :class="{'navdrawer--active': active}">
      <ul class="navdrawer__links">
        <router-link
          v-for="(link, linkId) in links"
          :key="linkId"
          :class="link.classes"
          tag="li"
          :to="{path: '/link'}"
        >{{link.name}}</router-link>
      </ul>
    </div>
  </nav>
</template>
<script>
import Hammerjs from 'hammerjs';

export default {
  mounted() {
    const app = new Hammerjs(document.documentElement);
    app.domEvents = true
    app.on('swipeleft', (ev) => {
      const NAVBAR = document.querySelector('.navbar');
      if (ev.srcEvent.path.includes(NAVBAR) && this.active) {
        this.closeNavbar();
      }
    });
  },
  data() {
    return {
      links: [
        {
          name: 'LINK1',
          classes: {
            link: true,
          },
        },
        ...
      ],
      active: false;
    };
  },
  methods: {
    toggleNavbar() {
      this.active = !this.active;
    }
    closeNavbar() {
      this.active = false;
    },
  },
};
</script>

Some details about the code and behavior

The #navbar element contains a drawer inside of it that has a style to put it out of screen when active is false and inside the screen when it's truthy, i created the Hammerjs instance on the document.documentElement so i can use event bubbling. When i scroll the document i check if the ev.srcEvent.path contains the #navbar DOM element i stored in a constant, and if it does (if the user swipes right on the opened navDrawer) it has to fire the closeNavbar() function. It works perfectly on desktop and Android, but it doesn't work on any Iphone i test it.

Answer 1

The problem was IOS doesn't recognize document.documentElement, changing it to document.body does the trick.

  mounted() {
    const app = new Hammerjs(document.body);
    app.domEvents = true
    app.on('swipeleft', (ev) => {
      const NAVBAR = document.querySelector('.navbar');
      if (ev.srcEvent.path.includes(NAVBAR) && this.active) {
        this.closeNavbar();
      }
    });
  },