React-Hook-Form working on PC, but on mobile inputs go blank when switching fields

Question

I used React-Hook-Form and Yup for validation to make an Amazon Create Account Clone. Everything works fine on my PC, but when I try to use the form on a mobile browser (both Chrome and Safari) the input fields text seems to vanish when I click to type into a new input field. When I go back to the "vanished" field, the text I previously typed reappears, but once I click a new field, disappears again. I need the mobile version to work like the PC version. The app was created with create-react-app and is deployed using Firestore. https://login-clone.web.app/

Signup.js

import React from 'react';
import '../App.css';
import hr from '../assets/hr.png';
import iFont from '../assets/iFont.png';
import { useForm } from "react-hook-form";
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';

const SignupSchema = yup.object().shape({
    userName: yup
        .string()
        .required("Enter your name"),
    email: yup
        .string()
        .email("Enter a valid email address")
        .max(1064)
        .required("Enter your email"),
    password: yup
        .string()
        .min(6, "Passwords must be at least 6 characters")
        .required("Enter your password"),
    rePassword: yup
        .string()
        .required('Type your password again')
        .oneOf([yup.ref('password')], 'Passwords must match')
});


const Signup = () => {
    const { register, handleSubmit, errors } = useForm({
        resolver: yupResolver(SignupSchema)
    });
    const onSubmit = data => {
        console.log(JSON.stringify(data));
    };

    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <div className='form-container'>

                <h1> Create account </h1>

                <label> Your name </label>
                <input
                    className={errors.userName && 'alertInput'}
                    name="userName"
                    type="text"
                    autoComplete="on"
                    ref={register}
                />
                {errors.userName && <div className="alertText"> {errors.userName.message} </div>}

                <label> Email </label>
                <input
                    className={errors.email && 'alertInput'}
                    name="email"
                    type="text"
                    autoComplete="on"
                    ref={register} />
                {errors.email && <div className="alertText"> {errors.email.message} </div>}

                <label> Password </label>
                <input
                    className={errors.password ? 'alertInput' : 'passwordColor'}
                    name="password"
                    type="text"
                    autoComplete="off"
                    placeholder="At least 6 characters"
                    ref={register} />
                {errors.password && <div className="alertText"> {errors.password.message} </div>}

                <p className={errors.password ? 'displayNone' : 'passwordColor'}>
                    <img src={iFont} className="iFont" alt="info icon" />
                 Passwords must be at least 6 characters. </p>


                <label> Re-enter password </label>
                <input
                    className={errors.rePassword && 'alertInput'}
                    name="rePassword"
                    autoComplete="off"
                    ref={register} />
                {errors.rePassword && <div className="alertText"> {errors.rePassword.message} </div>}


                <button type='submit'> Create your Amazon account </button>

                <p> By creating an account, you agree to Amazon's </p>

                <p> <span className="sm-font">Conditions</span> of Use and <span className='sm-font'> Privacy Notice. </span></p>

                <img src={hr} className="hr1" alt="horizontal line" />

                <p> Already have an account?  <span>Sign-in ▸</span> </p>
            </div>
        </form>
    )
}
export default Signup;

Answer 1

Found the problem. It's caused by your css line-height. Don't use line-height together with height in input css. ( I don't know why either, I'm not good with css )

input {
  margin-left: 15px;
  margin-right: 15px;
  margin-bottom: 5px;
  font-size: 13.33px;
  height: 23px;
  width: 292px;
  padding: 3px 7px;
  /*line-height: 19;*/
  border-radius: 3px;
  border: 1px solid #a6a6a6;
  border-top-color: #949494;
  cursor: text;
  text-rendering: optimizeLegibility !important;
}

Working sandbox