Cordova Platform Specific CSS - css

Question

I have an app made in cord. I only used it for android now I decided to test it for IOS and I noticed these CSS errors.
How do I fix these errors that appear only in the IOS app?
if it is useful, I will post my css files below.
Do you have to add a hack to css to be interpreted by IOS?
IMPUTS
.form-group {
background-color: white;
padding: 5px;
margin-bottom: 15px;
border-bottom: 1px solid #a7a7a7;
border-radius: 1px;
height: 47px;
}
.form-group label {
display: inline-block;
margin-bottom: 7px;
float: left;
font-size: 14px;
}
.form-group input[type=text],input[type=password],input[type=number],select,textarea {
width: 100%;
border: 0px;
font-weight: 600;
font-size: 17px;
background-color: white;
text-transform: uppercase;
outline: none;
}
.form-group input[type=date],input[type=datetime-local] {
width: 100%;
border: 0px;
font-weight: 600;
font-size: 17px;
background-color: white;
text-transform: uppercase;
outline: none;
}
*:focus {
outline: none;
}
checkbox.css
input[type=checkbox] {
position: relative;
cursor: pointer;
margin: 0 13px 10px 0;
}
input[type=checkbox]:before {
content: "";
display: block;
position: absolute;
width: 20px;
height: 20px;
top: 0;
left: 0;
background-color:#FFF;
border: solid 1px #CCC;
}
input[type=checkbox]:checked:before {
content: "";
display: block;
position: absolute;
width: 20px;
height: 20px;
top: 0;
left: 0;
background-color:#1E80EF;
}
input[type=checkbox]:checked:after {
content: "";
display: block;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 3px;
left: 8px;
}
radio.css
.form-group-radio {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.form-group-radio span {
float: left;
}
/* Hide the browser's default radio button */
.form-group-radio input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create a custom radio button */
.form-group-radio .checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.form-group-radio:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the radio button is checked, add a blue background */
.form-group-radio input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.form-group-radio .checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the indicator (dot/circle) when checked */
.form-group-radio input:checked ~ .checkmark:after {
display: block;
}
/* Style the indicator (dot/circle) */
.form-group-radio .checkmark:after {
top: 9px;
left: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
}

Answer 1

I won't go through your code because it's too much of a guess. My advice to you is always develop using chrome, then test again in Safari. You will find that Safari does not support/respect everything that Chrome does, css wise.
For instance, iOS webview has a hard time with flex box or even sticky. Lots of patching for Safari needed. So your code might be legit but iOS webview won't support it fully.
You can also detect with cordova what platform you are running (device.platform) then you can add a .ios class to your body and patch via the .ios class