Button text not rendering correctly on iPhone (CSS3) - ios

Question

I'm building an app that uses angular and node.
Ive done some CSS work to get the styling how I like.
When I view the buttons on the web, at all screen sizes,
it looks great, but on the iPhone, it looks horrible.
Everything is aligned weird and the padding/margins are incorrect.
Only inside the button.
Ive tried -webkit-appearance: none!important;
but have had no luck. I tried it on every element.
Anyone know what I can do to get my buttons to render like they
do on the web?
Here is a fiddle that replicates the problem. View it on phone and web view : https://jsfiddle.net/2543ge0a/2/
.socialBtn {
-webkit-appearance: none!important;
width: 300px;
color: #fdfdfd;
font-weight: bold;
text-align: center!important;
font-size: 17px;
}
.field p.control {
margin: 0 auto;
text-align: center!important;
}
.fbBtn {
-webkit-appearance: none!important;
background-color: #3b5998!important;
border-radius: 0;
text-align: center;
color: #fdfdfd;
border: none;
}
.googleBtn {
-webkit-appearance: none!important;
background-color: #D84B37!important;
border-radius: 0;
text-align: center;
color: #fdfdfd;
border: none;
}
.linkedinBtn {
-webkit-appearance: none!important;
background-color: #0077b5!important;
border-radius: 0;
text-align: center;
color: #fdfdfd;
border: none;
}
.signUpBtn {
-webkit-appearance: none!important;
background-color: #0077be!important;
border-radius: 0;
text-align: center;
color: #fdfdfd;
border: none;
}
.page {
padding-top: 0;
padding-left: 30px;
padding-right: 30px;
padding-bottom: 50px;
}
.title.has-text-centered {
color: #111;
font-size: 60px;
font-weight: 500;
margin-bottom: 1rem;
width: auto;
}
h4.title {
font-size: 25px;
text-align: center;
}
.subtitle {
margin-top: 1.5rem!important;
text-align: left;
line-height: 1.5;
}
h3.title {
color: #fdfdfd;
text-align: left;
font-size: 35px;
line-height: 1.3;
}
#media(max-width: 325px) {
h3.title {
color: #fdfdfd;
text-align: left;
font-size: 22px;
line-height: 1.3;
margin-bottom: 10px;
}
.subtitle {
margin-top: 1rem!important;
text-align: left;
line-height: 1.2;
font-size: 17px;
}
}
#media(max-width: 400px) {
h3.title {
color: #fdfdfd;
text-align: left;
font-size: 28px;
line-height: 1.3;
margin-bottom: 10px;
}
.subtitle {
margin-top: 1rem!important;
text-align: left;
line-height: 1.3;
}
}
a {
color: #FF9933;
}
.subtitle.is-6 {
margin-bottom: 30px;
}
button {
-webkit-appearance: none!important;
text-align: center!important;
}
#ctaBtn {
-webkit-appearance: none!important;
padding: 5px 7px;
height: 40px;
width: 150px;
color: #fdfdfd;
font-weight: 600;
font-size: 18px;
box-shadow: 2px 2px 6px #111!important;
background-color: #FF9933;
border: none;
text-align: center!important;
-webkit-transition: all .15s ease; /* Safari and Chrome */
-moz-transition: all .15s ease; /* Firefox */
-ms-transition: all .15s ease; /* IE 9 */
-o-transition: all .15s ease; /* Opera */
transition: all .15s ease;
}
section.section {
background-color: transparent;
padding-top: 0;
padding-bottom: 140px;
}
.button:hover {
-webkit-appearance: none!important;
-webkit-transform: translateY(3px);
-moz-transform: translateY(3px);
-ms-transform: translateY(3px);
-o-transform: translateY(3px);
transform: translateY(3px);
}
.button:active {
-webkit-appearance: none!important;
-webkit-transform: translateY(4px);
-moz-transform: translateY(4px);
-ms-transform: translateY(4px);
-o-transform: translateY(4px);
transform: translateY(4px);
}
.is-primary {
background-color: #0077be!important;
}
.is-primary:hover {
background-color: #0077be!important;
opacity: .8;
}
input.input, textarea.textarea {
border-radius: 0;
border-right: none;
border-top: none;
border-left: none !important;
box-shadow: none !important;
background: transparent!important;
color: #fdfdfd;
}
input::-webkit-input-placeholder {
color: #111!important;
opacity: .6;
}
input:-moz-placeholder { /* Firefox 18- */
color: #111!important;
opacity: .6;
}
input::-moz-placeholder { /* Firefox 19+ */
color: #111!important;
opacity: .6;
}
input:-ms-input-placeholder {
color: #111!important;
opacity: .6;
}
.textarea {
min-height: 10px;
}
input.input:focus, textarea.textarea:focus {
border-bottom-color: #0077be;
}
p.content {
color: #111;
}
#error {
z-index: 1000;
color: red;
font-weight: bold;
text-align: center;
padding: 13px 30px;
margin: 0 auto;
top: 0;
opacity: 0;
height: 0;
width: 300px;
-webkit-transition: all .2s;
-moz-transition: all .2s;
-ms-transition: all .2s;
-o-transition: all .2s;
transition: all .2s;
}
img.image {
margin: 0 auto;
}
#media(min-width: 650px) {
img.image {
max-height: 400px;
max-width: 300px;
}
}
#media screen and (min-width: 1008px) {
.page {
padding-left: 150px;
padding-right: 150px;
}
.container {
width: inherit;
}
.subtitle.is-6 {
font-size: 20px;
}
a {
font-size: 22px;
font-weight: 500;
cursor: pointer;
}
}
#media(max-width: 700px) {
.socialBtn {
-webkit-appearance: none!important;
width: 250px;
text-align: center!important;
}
}
<div class="modal" [ngClass]="{'is-active': signup}">
<div class="modal-background"></div>
<div class="modal-card">
<section class="modal-card-body">
<i class="fa fa-times-circle" aria-label="close" (click)="onClickAction('exit')" style="float: right;
-webkit-transform: translateX(10px);
-moz-transform: translateX(10px);
-ms-transform: translateX(10px);
-o-transform: translateX(10px);
transform: translateX(10px); translateX(10px)"></i>
<div class="container">
<h4 class="title"
style=" font-family: 'Ubuntu', sans-serif;color: #0077be;">For the innovators</h4>
<h6 class="subtitle has-text-centered">Signup</h6>
<p class="content">For our first <strong style="color: #FF9933; font-size: 17px;">1000</strong> users, we're offering
<strong style="color: #FF9933; font-size: 17px;">free</strong>
fees on all transactions for the first year. We'll take care of the business, you just provide the electronics.</p>
<div *ngIf="!signupComplete">
<div class="field" style="text-align: center">
<div class="card">
<input
type="email"
name="email"
#emailT="ngModel"
[(ngModel)]="user.email"
placeholder="email *required"
required
style="color: #111"
class="input">
<input
type="text"
name="name"
#nameT="ngModel"
[(ngModel)]="user.name"
placeholder="name"
style="color: #111"
class="input">
<input
type="text"
name="image"
#imageT="ngModel"
[(ngModel)]="user.image"
placeholder="image url"
style="color: #111"
class="input">
</div>
</div>
<div class="field">
<p class="control">
<button
(click)="onSignup()"
class="button socialBtn signUpBtn has-text-centered">Join rent
</button>
</p>
</div>
<h4 class="subtitle has-text-centered">Or</h4>
<div class="field">
<p class="control">
<button
(click)="authSignin('facebook')"
class="button socialBtn fbBtn">
<span class="icon is-small">
<span class="fa fa-facebook"></span>
</span> <span> | Signup with Facebook</span>
</button>
</p>
</div>
<!--<div class="field">-->
<!--<p class="control">-->
<!--<button-->
<!--(click)="authSignin('linkedin')"-->
<!--class="button socialBtn linkedinBtn">-->
<!--<span class="icon is-small">-->
<!--<span class="fa fa-linkedin"></span>-->
<!--</span> <span> | Signup with Linkedin</span>-->
<!--</button>-->
<!--</p>-->
<!--</div>-->
<div class="field">
<p class="control">
<button
(click)="authSignin('google')"
class="button socialBtn googleBtn">
<span class="icon is-small">
<span class="fa fa-google"></span>
</span> <span> | Signup with Google</span>
</button>
</p>
</div>
</div>
<img src="../../assets/animat-checkmark-color.gif" alt="" class="image" *ngIf="checkmark">
<h4 class="title" *ngIf="thankyou">Thanks for signing up! <br>Look out for an email</h4>
</div>
</section>
</div>
</div>

Answer 1

As you described that Everything is aligned weird and the padding/margins are incorrect on iPhone. It seems that viewport is missing, So add this viewport to your header. Hope this will help you.
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />