Login input forms broken on iOS

For some reason I can’t get the inputs to work normally on iOS (they work perfectly on Android though), on the login screen, for some weird reason they work fine on the sign-up screen though.

In this picture we can see that the top input has an ::after tag in html, (the white line on the bottom of the input), but the one on the bottom does not.

You can’t appreciate this one on this picture, but the email input, you start typing something and for some reason what you type is not visible until you change focus, but the blue cursor moves while you type

This last one is pretty self explanatory, when I type something on the password (in spanish, contraseña), there’s a black line covering the text I’m typing.

Screenshots were taken on an iPhone 7 with iOS 12.

Here’s the code:

<f7-list form class="login-form">
    @input="email = $event.target.value"
    @input="password = $event.target.value"
<f7-button class="no-transform" style="color: #F7FC96;">¿Olvidaste tu contraseña? Recupérala</f7-button>
  style="background-color: #ffd92d"
>Iniciar sesión</f7-button>
<table style="width:100%;">
    <td style="width:45%">
      <hr />
    <td style="width:10%; color:white;" align="center">ó</td>
    <td style="width:45%">
      <hr />
<f7-button @click="gmailLogin()" class="fillF7Button socialButton" fill style="background-color: #D54D4D">
  <img :src="googleLogo" alt />
  Continuar con Gmail
<f7-button @click="facebookLogin()" class="fillF7Button socialButton" fill style="background-color: #3B5998">
  <img :src="facebookLogo" alt />
  Continuar con Facebook
  style="color: #F7FC96;"
>¿Aún no tienes cuenta? Regístrate aquí</f7-button>
  style="position: relative; bottom: 25px; z-index:-1; width: 100%; height: 0; overflow:visible;"
  <img style="width:100%;" :src="coins" alt />

This is the CSS

.no-transform {
  text-transform: none;
.login-form .item-label {
  --f7-input-font-weight: 300;
  color: white;
  font-style: italic;
.login-form .item-input-focused .item-floating-label {
  color: #ffd92d !important;
  font-weight: bold !important;
  font-style: normal;

.login-form {
  --f7-input-text-color: #ffffff;
  --f7-input-font-size: 16px;
  --f7-input-font-weight: 300;
  --f7-input-placeholder-color: white;
  --f7-input-placeholder-font-style: italic;
  --f7-input-outline-border-color: #fff;
.login-form .item-input-wrap:after {
  background-color: white !important;
.login-form .item-input-wrap:after .focused {
  background-color: white !important;
.login-page .page-content {
  background-color: black;
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #fff;
  margin: 1em 0;
  padding: 0;
.socialButton img{
  left: 10vw;
.loader {
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */

Do you know what could be happening?
This is the last thing I need to fix in order to deploy the app, but I don’t really know where to begin debugging this.

[SOLVED] Had to redo the entire screen from scratch, tbh I have no clue what solved the issue.

Issue seems like some custom styling issues. As for the issue where there is no border on last input in iOS theme, it is by design. Last item in list in iOS theme doesn’t have that bottom border. If you need it, you can just try to add empty <li></li> in the end