DEV

VuetifyにIEを対応させる（２）

#Vue.js#IE

下記の続きです。

https://blog.logicky.com/2019/06/20/164558 — blog.logicky.com

VuetifyはIEはIE11にのみある程度対応しています。Edgeには対応しているとのことです。

https://vuetifyjs.com/ja/getting-started/quick-start#supported-browsers — vuetifyjs.com

こちらのとおりに対応することで、IE11への対応が可能になります。実際やってみたところ、私のサイトの場合は、IEでも表示されるようにはなったものの、あらゆる箇所の表示が崩れておりました。Edgeでも、ロゴ画像が何故か表示できない等の問題がありました。しかし、結果的に下記を対応することで、今の所IE11とEdge(38)でもchromeとほぼ同様な表示にすることができました。

IE11対応のために実施したこと

※ Vuetifyのバージョンは、1.5.16です。

SVG画像ではなくPNGにした

vue-clieで作成したプロジェクトを、firebase hostingにアップしてますが、svg画像はIEで表示できなかったので、とりあえずpngにしました。

ボタンの幅を設定するのをやめた

v-btnに、下記のように幅を設定していたら、ボタンのテキストの表示崩れが起きました。これをやめることで、chrome等と同じ表示になりました。

<v-btn
  style="width: 180px"
>

v-flexに、d-flexを設定するのをやめた

カードに画像を表示させている場合、画像のサイズが自動調整されず、カードの幅を飛び越えて表示されておりました。これはd-flex設定を削除すると、自動調整されてカード枠内に画像がおさまるようになりました。

画像に高さを設定した（Edge向け）

Edgeでは、高さの設定がないタグは、画像が表示されませんでした。高さを明示的に設定することで全ての画像が表示されるようになりました。

トップに戻るボタンのコードをIE11の場合だけ別にした

クリックすると画面の一番上にスクロールしながら戻るやつがあるかと思いますが、あれは下記のようなコードを使っていました。しかしこれだと、Edgeは動きますが、IE11は動きませんでした。anime.jsを使ってみましたが、どうもだめなので、結局下記のようにしました。

変更前

<template>
  <div id="goToTop">
    <v-btn
      color="cyan darken-3"
      dark
      fixed
      bottom
      right
      fab
      @click="goTop"
    >
      <v-icon>keyboard_arrow_up</v-icon>
    </v-btn>
  </div>
</template>


<script>
  export default {
    data: () => ({}),
    methods: {
      goTop () {
        this.$vuetify.goTo(0, {
          duration: 280,
          offset: 0,
          easing: 'easeInQuad'
        })
      }
    }
  }
</script>

変更後

<template>
  <div>
    <v-btn
      color="cyan darken-2"
      dark
      fixed
      bottom
      right
      fab
      @click="goTop"
    >
      <v-icon>keyboard_arrow_up</v-icon>
    </v-btn>
  </div>
</template>


<script>
  export default {
    data: () => ({}),
    methods: {
      goTop() {
        const ua = window.navigator.userAgent.toLowerCase();
        const isIE11 = (ua.indexOf('trident/7') > -1);
        if (!isIE11) {
          this.$vuetify.goTo(0, {
            duration: 280,
            offset: 0,
            easing: 'easeInQuad'
          });
        } else {
          window.scrollTo(0, 0);
        }
      }
    }
  }
</script>