Vuejs: 100vh on mobile browsers

I have page with min-height: 100vh and it renders on mobile browsers with some overflow on bottom. And I use this script to fix it:

  methods: {
    calcVH() {
      const vH = Math.max(document.documentElement.clientHeight, window.innerHeight, window.screen.height || 0)
      document.getElementById('app').style.height = vH + 'px';
    }
  },
  mounted() {
    this.calcVH();
    window.addEventListener('onorientationchange', this.calcVH, true);
    window.addEventListener('resize', this.calcVH, true);
  }

It works ok in emulator, but it doesn't work on chrome/safari mobile. Did anyone have same problem?

Yes, I had similar issues using vh. It's a known problem.

My suggestion for you is to stop using vh on mobile and tablets in order to avoid these kind of hacks around. Use classic relative % (percentage) values instead. Since I've replaced vh with % I have no such problems on mobiles but it requires a bit more implementation effort. Using % isn't straightforward in all cases, but it pays you back since you've got a solution which works pretty everywhere in the same predictable way.