Click invalidation problem of input [type=submit] in Safari and ios mobile browsers

the html code is as follows:

            <form action="getInfo.php" class="c-w-form" method="POST">
                <div class="c-w-item pr">
                    <input type="text" class="w-f-input w-f-txt" name="username" placeholder="Full Name"  required>
                    <i class="fas fa-user pa"></i>
                </div>
                <div class="c-w-item pr">
                        <input type="text" name="email" class="w-f-input w-f-txt" placeholder="Email ID"  required>
                        <i class="fas fa-envelope pa"></i>
                </div>
                <div class="c-w-item pr">
                        <input type="password" name="psw" class="w-f-input w-f-txt" placeholder="Set Password"  required>
                        <i class="fas fa-unlock-alt pa"></i>
                </div>
                <div class="c-w-item">
                        <input type="submit" class="w-f-input w-f-btn" value="SIGN UP">
                </div>
            </form>

css Code:

.c-w-form{
    overflow: hidden;
}
.c-w-form .c-w-item{
    height: .54rem;
    margin-bottom:.1rem;
    color:-sharp6b84a0;
}
.c-w-form .c-w-item:last-child{
    margin-bottom: 0;
    padding-top:.3rem;
}
.c-w-form .c-w-item .w-f-input{
    width: 2.47rem;
    height: .54rem;
    border-radius: 1.2rem;
    padding: 0 .26rem;
    font-family: robotolight;
    font-size:.16rem;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}
.c-w-form .c-w-item .w-f-txt{
    background: rgba(25,64,107,0.7);    
    color:-sharp6b84a0;   
    -webkit-transition: background .5s;
    transition: background .5s;
}
.c-w-form .c-w-item .w-f-txt:focus{
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    background:-sharpfff;
    color:-sharp000;
}
.c-w-form .c-w-item .w-f-txt:focus + .fas{
    color:-sharp000;
}
.c-w-form .c-w-item .fas{
    top: 0.18rem;
    right: .26rem;
    font-size: .18rem;
}
.c-w-form .c-w-item .w-f-btn{
    width:100%;
    color:-sharpfff;
    background: -sharp23da94;
    cursor: pointer;
}

problem description :
under Safari (Mac), clicking input.w-f-btn will not trigger the submit event, nor will the css code cursor:pointer . This is true for both Safari and Chrome under ios (ios mobile only tests these two browsers), and other browsers are normal (PC and Android).
I found that this problem occurs when the container div.c-w-item sets the height height:.45rem for input.w-f-btn .

Mar.03,2021

input submit button location completely cannot be clicked if it is not within the scope of form. For example, if you set the absolute location top-150%, (you have too much code, I did not read it), you can see if this is the case.

Menu