Cordova on iOS: Font-size seems to get added to input width. Is this preventable?

I have created an app with Cordova and vue.js. While it looks as it should on Android devices, on iOS all inputs (at least text fields) are wider than they are supposed to be. After experimenting a while, I found out, that if I subtract the font-size from the width of the input, the width would be correct. I tried this with the viewport dependent units I usually use as well as with pixel units. I find this really baffling and even more so that I seem to be the only person on the whole wide web having this problem.

For reference I added some relevant CSS/LESS code. Both element do not have any additional styles in the vue code, the button has the correct width, but the text field is wider. If I reduce the input's width by 7vw, the width is "correct", i.e. as wide as the button. As mentioned before, this only happens on iOS, the app looks fine on Android.

.login-button {
    width: 80vw;
    border-radius: 2vw;
    padding-top: 1vw;
    padding-bottom: 1vw;
    margin-left: 10vw;
    margin-top: 2vw;
    margin-bottom: 2vw;
}

.login-textfield {
    width: 80vw;
    border-width: 0;
    border-radius: 2vw;
    padding-top: 1vw;
    padding-bottom: 1vw;
    font-size: 7vw;
    text-align: center;
}

Does anyone have any idea why this might be as it is and if this can be prevented? I've tried -webkit-appearance: none, but to no avail. The effect applies to other text fields in the app as well.