[Bug Report] v-text-field text is clipped when font-size is too large (in Safari)

[nmummau]

Environment

Vuetify Version: 2.3.10 Vue Version: 2.6.10 Browsers: Safari OS: Linux x86_64

Steps to reproduce

Open this codepen in Safari and notice the bug. You will not notice this in Chrome (tested on Android, linux, and Windows).

It happens because the v-text-field has a class settting the "font-size: 2em;"

confirmed using lambdatest.com to simulate a Safari browser since I'm a linux developer and do not have an iPhone sitting around to test with.

Expected Behavior

properly center text inside v-text-field when font-size is set to a special size via a css class

Actual Behavior

Safari is clipping the text inside a v-text-field when font-size is set to a special size via a css class

Reproduction Link

https://codepen.io/nmummau/pen/oNzvGoy

Other comments

Kael confirmed in discord here

Kael

probably the class setting the font size to 2em (is causing this). they're fixed height so if the text is too big it'll just be cut off

Me

Okay. Is there a better way to set the text size? I'm not noticing an issue on smaller Android devices running Chrome, so any help is appreciated.

Kael

looks like safari treats padding in a dumb way and clips the text instead of overflowing if you remove the padding from .v-text-field input it should look a bit better, but still doesn't centre properly like in other browsers

[nmummau]

@KaelWD I cannot figure out how to remove the padding from the v-text-field input and get Safari to work nicely. In the codepen it works -- meaning when testing the codepen using a real Safari browser on my wife's Macbook, the text displays just fine -- but when I make the same css change in my app's scoped style, and then deploy my app, this does not fix my app on a Safari browser. I've even tried setting padding: 0 important!;. Still no success. Any thoughts?

[KaelWD]

https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

[johnleider]

This Issue is being closed due to inactivity.

If you have any questions, please reach out to us in our Discord community.

[fstaine]

I had the same issue. To solve this, I had to override these sass variables:

$text-field-padding: 0;
$text-field-line-height: unset;