배경

이전에, Vuetify를 조사하고 있을 때, treeview를 IE11로 표시했을 때에 미묘하게 스타일이 무너지는 것을 깨달았다.

일단, 아래와 같이 Vuetify는 Polyfill 적용으로 IE11에도 대응하고 있는 것 같기 때문에, 기본적으로는 IE11에서도 동작하게 되어 있다.
htps : // ゔ에치 fyjs. 코 m / 자 / 갓찐 g - s r d / b 로 w 세 r 쏘 rt /

다만, 이 현상은 공식에 있는 IE11 대응의 순서를 실시해도 해결할 수 없었기 때문에, 이용측에서 이 스타일 붕괴에 대응할 수 없을까 생각해 보았다.

현상

현상으로서는, 트리의 아이 요소를 여는 아이콘을 눌렀을 때의 회색의 원 부분이 미묘하게 어긋나 있는 느낌.



공식 사이트의 트리뷰를 IE11로 표시하면 재현하므로 쉽게 확인할 수 있다(2020/6 시점).
htps : // ゔ에치 fyjs. 코 m / 그럼 / 코 m 포넨 ts / t Reee w /

수정해보기

우선, Treeview를 이용한 간단한 코드를 써 보자.

App.vue

<template>
  <VApp>
    <VTreeview :items="items"></VTreeview>
  </VApp>
</template>

<script lang="ts">
import Vue from "vue";
import { VApp, VTreeview } from "vuetify/lib";

export default Vue.extend({
  name: "App",

  components: {
    VApp,
    VTreeview,
  },

  data: () => ({
    items: [
    ... (省略) ...
    ],
  }),
});
</script>

실행하여 IE11로 표시해 본다.



당연히 스타일 무너지는 그대로.

DOM을 조사하여 그것 같은 요소를 특정하고 스타일을 적용해 본다.

App.vue

...
<style>
.v-treeview-node__root .v-icon.v-icon::after {
  top: 0;
  left: 0;
}
</style>

다시 IE11에서 확인해 본다.



우선, 제대로 동작해 그렇게.
만약을 위해, Chrome에서도 동작 확인.



괜찮아요.

사이고에게

Vuetify의 treeview를 IE11로 표시했을 때의 스타일 무너짐에 대응해 보았다.
적절한 방법인지는 모르겠지만 일단 크롬 등 다른 브라우저와 비슷한 움직임으로 할 수 있다는 것을 알았다.