CSS Button not rendering correctly on iPad - html

Question

I have a button created with css on a web application, when I test the button on chrome on android the button renders fine and stays on top of everything because of the z-index property:
But when I test the same thing on chrome on IOS it doesnt renders the button the way its supposed to be and doesnt respect the z-index property:
I tried to add "-webkit-appearance: none;" to the css but it didnt worked heres the css and html:
#PINPOINT {
-webkit-appearance: none;
width: 70px;
height: 70px;
margin: 15px auto;
position: relative;
z-index: 5000;
}
#BUTTON {
-webkit-appearance: none;
box-sizing: border-box;
color: rgba(0, 0, 0, 0.870588);
height: 70px;
text-align: left;
width: 70px;
column-rule-color: rgba(0, 0, 0, 0.870588);
perspective-origin: 227.828px 35px;
transform-origin: 227.828px 35px;
border: 0px none rgba(0, 0, 0, 0.870588);
font: normal normal normal normal 14px / 21px Roboto, sans-serif;
outline: rgba(0, 0, 0, 0.870588) none 0px;
position: fixed;
right: 0;
}
#TEXT {
-webkit-appearance: none;
bottom: 0px;
box-shadow: rgba(0, 0, 0, 0.156863) 0px 2px 5px 0px, rgba(0, 0, 0, 0.117647) 0px 2px 10px 0px;
box-sizing: border-box;
color: rgb(255, 255, 255);
cursor: pointer;
display: inline-block;
height: 55.5px;
left: 0px;
letter-spacing: 0.5px;
position: relative;
right: 0px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
top: 0px;
vertical-align: middle;
width: 55.5px;
will-change: opacity, transform;
z-index: 1;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 27.75px 27.75px;
transform-origin: 27.75px 27.75px;
background: rgb(239, 83, 80) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(255, 255, 255);
border-radius: 50% 50% 50% 50%;
font: normal normal normal normal 14px / 56px Roboto, sans-serif;
margin: 0px 0px 14px;
outline: rgb(255, 255, 255) none 0px;
overflow: hidden;
transition: all 0.3s ease-out 0s;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div id="PINPOINT">
<div id="BUTTON">
<i class="fa fa-reply" aria-hidden="true"></i>
</div>
</div>

Answer 1

You may use flexbox to make them align horizontally and vertically center. Here's the code.
#PINPOINT {
-webkit-appearance: none;
width: 70px;
height: 70px;
margin: 15px auto;
position: relative;
z-index: 5000;
}
#BUTTON {
-webkit-appearance: none;
box-sizing: border-box;
color: rgba(0, 0, 0, 0.870588);
height: 70px;
text-align: left;
width: 70px;
column-rule-color: rgba(0, 0, 0, 0.870588);
perspective-origin: 227.828px 35px;
transform-origin: 227.828px 35px;
border: 0px none rgba(0, 0, 0, 0.870588);
font: normal normal normal normal 14px / 21px Roboto, sans-serif;
outline: rgba(0, 0, 0, 0.870588) none 0px;
position: fixed;
right: 0;
}
#TEXT {
-webkit-appearance: none;
box-shadow: rgba(0, 0, 0, 0.156863) 0px 2px 5px 0px, rgba(0, 0, 0, 0.117647) 0px 2px 10px 0px;
box-sizing: border-box;
color: rgb(255, 255, 255);
cursor: pointer;
height: 55.5px;
letter-spacing: 0.5px;
position: relative;
text-align: center;
text-decoration: none;
text-transform: uppercase;
vertical-align: middle;
width: 55.5px;
will-change: opacity, transform;
z-index: 1;
transform-origin: 27.75px 27.75px;
background: rgb(239, 83, 80) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(255, 255, 255);
border-radius: 50% 50% 50% 50%;
font: normal normal normal normal 14px / 56px Roboto, sans-serif;
margin: 0px 0px 14px;
outline: rgb(255, 255, 255) none 0px;
overflow: hidden;
transition: all 0.3s ease-out 0s;
/*Use flexbox property to fix this.*/
display: flex;
justify-content: center;
align-items:center;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<div id="PINPOINT">
<div id="BUTTON">
<i class="fa fa-reply" aria-hidden="true"></i>
</div>
</div>