Chromeのモバイルブラウザでのみ謎の空白が発生し、一部cssが無効になる

Question

###前提・実現したいこと
いつもお世話になっております。
現在原因不明のレイアウトのバグ(？)が起きており、自分では解決できずに立ち往生してしまっています。
皆様、よろしければお力添えをお願いいたします。

###発生している問題・エラーメッセージ
今現在iPhoneのChromeのモバイルブラウザでのみ以下の画像①のように何故かサイトの下部に謎の余白ができてしまっています。

-画像①-

そのためこの画像②のように、sweetalertも空白分を基準とした中央に配置されてしまっている状態です。

-画像②-

ここで奇妙なのが、この画像③のようにposition: fixedが指定してあるハンバーガーメニューも何故か一緒にスクロールしてしまっていることです、何故かプロパティが効いていません。（下記の「追記」を御覧ください）

-画像③-

そして期待した通りに表示される場合もあります、ただその時は何故かcssアニメーションが効かなくなっています。

纏めると、「サイトの下部に謎の余白ができる・メニューのposition: fixedが効かなくなる」と「cssアニメーションが効かなくなる」のどちらかがランダムに発生している状態です。

最後に以下の画像④は表示問題のないSafariでスワイプしながら撮ったスクリーンショットなのですが、メニューにきちんとposition: fixedが効いており、そもそもプロパティが指定できていないという話ではないとご理解頂けると思います。

-画像④-

※確認した環境：
windows10 pro 64bit / Chrome, Firefox, edge
iPhone6, 6plus, 8 / Chrome, Safari, Yahoo
Xperia xz1 / Chrome

###※追記
・以下の画像⑤はスワイプしながら撮ったスクリーンショットなのですが、基準の位置はオカシイですが一応position: fixed自体は効いているようでした。
bodyが不自然に伸びてしまっているのでしょうか？

-画像⑤-

・エンジニアの方のブログで似た事例を見つけました。
https://naoyu.net/window-load-innerwidth/
innerWidthではなくloadイベントで読んでいるわけでも無いので厳密には違うのですが、似たような箇所が原因かと思い下記のinnerHeightを取得するコードのタイミングを逆にloadにしたり、DomContentLoadedにしてみたりしましたが変わりませんでした。

個人的にはinnerWidthでバグが有ったのならinnerHeightでもあってもオカシクないと思ってしまうのですが、ご存じの方はいらっしゃるでしょうか？
自分でググった限りではiOSのChromeでのinnerHeightのバグの情報は出てきませんでした。

###該当部分のコード
特にエラー等もなく、色々とググっては見たのですが似たような症状もヒットせず、私の知識では正確な該当部分が絞り込めませんでした。
ただinnerHeightを取得するコードの部分が怪しいのでその部分のコードを始めに載せさせていただきます。
他は何かご指摘いただいた時に、随時その部分のコードを追加するという形にさせて下さい。

※scssでincludeしているcenter-stylingはflexboxを使って上下左右の中央に配置するコードです。

<template>
  <div id="app">
    <header-component />
    <div class="wrapper" :class="{ 'wrapper--opened': active }">
      <main>
        <transition name="switch" mode="out-in">
          <router-view />
        </transition>
      </main>
      <footer-component />
    </div>
    <div class="loading" v-if="loading">
      <img :src="require('@/assets/images/authentication-loading.svg')">
    </div>
  </div>
</template>

import HeaderComponent from '@/components/Header.vue';
import FooterComponent from '@/components/Footer.vue';
import { mapState, mapActions } from 'vuex';
import firebase from 'firebase';

export default {
  created() {
    firebase.auth().onAuthStateChanged(user => {
      if(user) {
        this.setLoginUser(user);
        this.fetchBooks();
        this.$swal({
          toast: true,
          position: 'top-end',
          type: 'success',
          title: 'ログインしました',
          showConfirmButton: false,
          timer: 1500
        }).then(result => {
          if(result) this.offLoading();
        });
      }
    });
  },
  mounted() {
    let vh = window.innerHeight * 0.01;
    document.documentElement.style.setProperty('--vh', `${vh}px`);
    window.addEventListener('resize', () => {
      let reVh = window.innerHeight * 0.01;
      document.documentElement.style.setProperty('--vh', `${reVh}px`);
    });
  },
  computed: {
    ...mapState(['loading', 'active']),
  },
  methods: {
    ...mapActions(['setLoginUser', 'offLoading', 'fetchBooks'])
  },
  components: {
    HeaderComponent,
    FooterComponent
  }
};

@import '@/assets/styles/_fragments.scss';

html {
  font-size: calc(62.5% + 0.5vw);
}
body {
  font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
  color: $base-black;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a {
  color: $base-black;
  text-decoration: none;
}

#app {
  text-align: center;
  overflow: hidden;
  min-height: calc(var(--vh, 1vh) * 100);
  .wrapper {
    background-image: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), url('~@/assets/images/main-background.jpg');
    background-size: cover;
    transition: 0.5s;
    &--opened {
      transform: translateX(15rem);
    }
    main {
      @include center-styling;
      min-height: calc(var(--vh, 1vh) * 100 - 2.5rem);
      box-sizing: border-box;
      padding: 1rem 0;
    }
  } //.wrapper
  .loading {
    @include center-styling;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 101;
    background-color: rgba(0, 0, 0, 0.2);
    user-select: none;
  }
} //#app

//ページ遷移トランジション
.switch-enter-active {
  transition: 1s;
}
.switch-enter,
.switch-leave-to {
  opacity: 0;
}

Comments

[kyoya0819]

Safariでは発生しないんですよね？

[take-t.t.]

はい、今の所iPhoneのChromeだけで発生しています。
XperiaのChromeでは大丈夫でした。

[kyoya0819]

iPhoneの、それもChromeだけ違う挙動が起きるというのはいささか不思議でして、
iOS, iPad OSのブラウザの仕様等々はすべて共通なんです。(WebKit2)
なので、仕様上の問題ならほかのアプリでも再現できるはずです。
そうなるとChrome自体のバグの可能性も考えられます。
最新バージョンでしょうか？

[take-t.t.]

全て最新版で検証しました。
あとiPadは持っていなく検証できていないので、実際はそっちでも発生しているのかもしれません。
一応PCのChromeのデベロッパーツールから確認する限りでは、すべての端末で問題なく表示できるはずなのですが...

それとこれは質問文にも追記させていただこうと思っていたのですが、謎の空白が出来てしまっていた場合でも、一度ログインするなどして何かイベントが発火すると表示が元に戻る（普通のF5的な更新では戻らない）ようです。
他にもいくつか分かったことがあるので詳しくは質問文に追記します。

[退会済みユーザー]

PCのブラウザのエンジンで端末サイズでCSSが同表示されるかを確認されるだけであって動作を保証するものではないです。→デベロッパーツール

Answer 1

解決はしていませんが、iOS版のChromeでのみ起こることから、こいつ特有のバグかと思われるので仕様という事で質問を取り下げさていただきます。

Answer 2

innerHTMLをouterHeightにすると解消しませんか?

スマホはアドレスバーが見え隠れする関係、ビューポートの高さの値はouterHeghtで取得しないと正しい高さが得られないのでは?と思ったのですが...
参考リンク

Comments

[take-t.t.]

所謂
html, body {
100%;
}
の時の要素の高さ(アドレスバー等を含まない純粋なビューポートのheight)を取得したいので、innerHeightでないとやりたいことが出来ないんです。

似た事がvhでも出来ますが、それだとアドレスバー等を含んでしまうので、innerHeightを1/100したinnerVh的なものを取得したいという感じです。

[makosankibu]

IOS端末でのデバッグをするしかないと思います。
掲載されてるコード見た感じだと#appに指定されてるmin-heightの値(--vh)が怪しそうですが...

とにかくvar(--vh)の値をデバッグで調べてみないとわからなそうですね