Vuetifyのv-text-fieldにおいて記入される文字が大きいと、文字の表示が隠れるバグについて - 疑念は探究の動機であり、探究の唯一の目的は信念の確定である。

概要
Vuetifyのv-text-fieldにおいて記入される文字が大きいと、文字の表示が隠れるバグがある。ただし、そのようなバグはSafariのみに発生する。
その解決方法を提示する。

修正前

左側がSafariで右がChromeでの表示。Safariだと文字が隠れる。

修正後

左側がSafariで右がChromeでの表示。いちおう問題解決。

<template>
<v-app>
<div>
<v-text-field
></v-text-field>
</div>
</v-app>
</template>
<script>
export default {
  data: () => ({
  }),
};
</script>
<style scoped>
.v-text-field >>> input {
  font-size: 1.9em;
  padding: 0 !important;
}
</style>

はじめに
ソースコード
注意点
- 文字の大きさについて
- クラス表示について
参考文献
終わりに

はじめに

Vuetifyのv-text-fieldにおいて、そこに記入される文字を大きくすると、文字の表示が隠れるバグがあります。ただし、そのようなバグはSafariのみで生じます。ChromeやFirefoxではそのようなバグは発生しません。
今回はそのようなバグを解決する方法を示します。

ソースコード

vueファイルのstyle箇所に次のように追加します。

<style scoped>
.v-text-field >>> input {
  font-size: 1.9em;
  padding: 0 !important;
}
</style>

padding: 0 !important;を追加することで、問題はいちおう解決しますが、いくつか注意点があります。

注意点

文字の大きさについて

アルファベットなどの半角英数字でしたら、font-size: 1.9em;ぐらいでも問題ありません。しかし、次のGIFの通り、この大きさで全角文字を入力すると、Safariでは文字は隠れてしまいます。

左側がSafariで右がChromeでの表示。

v-text-fieldのオプションにはfull-widthというものがあります。これは「入力のタイプを全幅(full-width)として指定する」オプションです。ですが、これを追加しても問題は解決されません。

全角文字でも問題なく表示するには、大きさはfont-size: 1.7em;ぐらいが限界だと思います。

クラス表示について

今回のコードではあるファイル内のすべてのv-text-fieldで、文字が大きくなってしまいます。そうではなくて、特定のv-text-fieldのみに適応させたい場合、次のようにしてクラスを作れば解決可能です。

<script>
<template>
<v-app>
<div>
<v-text-field class="class-v-text-field"
></v-text-field>
</div>
</v-app>
</template>
<script>

export default {
  data: () => ({
  }),
};
</script>
<style scoped>
.class-v-text-field.v-text-field >>> input {
  font-size: 1.9em;
  padding: 0 !important;
}
</style>