Website looks different between Chrome and Safari - html

Question

i am programming an App with Angular. And the problem is, that my button is looking different in Safari on my iPhone then on my Simulated iPhone in Chrome.
in Chrome it looks like this:
And on my iPhone it looks like this:
I know that it could be a problem because i have not implemented anything webkit related, but i couldnt find something with webkit that could help me with this.
The Code is the Following:
#colorPicker button {
border: none;
border-radius: 30px;
width: 100%;
height: 86%;
position: relative;
top: -6%;
overflow: hidden;
}
#colorPicker i {
color: white;
}
#colorPicker #second {
background-color: rgb(48, 209, 88);
}
#colorPicker #third {
background-color: rgb(12, 50, 102);
}
#colorPicker #fourth {
background-color: rgb(0, 0, 0);
}
#content {
overflow: hidden;
}
.resetSettings {
border: none;
padding: none;
margin: none;
border-radius: 25px;
color: white;
}
#activeButton {
color: white;
background-color: rgb(88, 86, 214);
width: 100%;
height: 120%;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border: none;
padding: none;
margin: none;
}
#settingsDatenschutz {
width: 80%;
border: none;
background-color: transparent;
padding: none;
margin: none;
margin-right: 10%;
margin-left: 10%;
border-radius: 25px;
font-family: Arial, Helvetica, sans-serif;
}
#settingsDatenschutz p {
font-size: 18pt !important;
font-family: Arial, Helvetica, sans-serif !important;
}
#settingsDatenschutz i {
font-size: 18pt !important;
}
#datenschutz {
margin: none;
border: none;
padding: none;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
z-index: 102;
background-color: rgb(44, 44, 46);
overflow-y: scroll;
}
#datenschutz button {
width: 100%;
bottom: 0;
position: fixed;
font-size: 20pt;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<style>
#content {
background-color: white;
color: black;
border: none;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
margin: 5%;
margin-top: 2%;
width: 90%;
position: relative;
top: 12%;
left: 0;
right: 0;
overflow: scroll;
padding: 15px;
font-size: 20pt;
}
#content i {
font-size: 28pt;
padding-top: 5px;
}
#content p {
display: inline;
}
#view {
z-index: 2;
position: relative;
top: 0;
margin: none;
width: 100%;
height: 100%;
}
#colorPicker {
width: 90%;
height: 90%;
margin: 5%;
margin-top: 20%;
}
/* #colorPicker button {
border: none;
border-radius: 30px;
width: 100%;
position: relative;
top: -6%;
}
#colorPicker i {
color: white;
}
#colorPicker #default {
background-color: rgb(10, 132, 255);
}
#colorPicker #second {
background-color: rgb(48, 209, 88);
}
#colorPicker #third {
background-color: rgb(12, 50, 102);
}
#colorPicker #fourth {
background-color: rgb(0, 0, 0);
} */
</style>
<div id="view">
<div id="content">
<br>
<div id="colorPickerButtonView">
<div class="row">
<div id="firstMain" class="col-6">
<div class="activeColorFromColorPicker" id="colorPicker">
<button class="primaryColorDefault" alt="Hellblauer Hintergrund, weiße Schrift" onclick="colorPicker(0)" id="default">
<br>
<i class="fab fa-accessible-icon"></i>
<br>
<div id="activeButton">
<p>Active!</p>
</div>
</button>
</div>
</div>
<div id="secondMain" class="col-6">
<div id="colorPicker">
<button alt="Helglgrüner Hintergrund, weiße Schrift" onclick="colorPicker(1)" id="second">
<br>
<i class="fab fa-accessible-icon"></i>
<br>
<div id="activeButton">
<p>Active!</p>
</div>
</button>
</div>
</div>
<div id="thirdMain" class="col-6">
<div id="colorPicker">
<button alt="Dunkelblauer Hintergrund, weiße Schrift" onclick="colorPicker(2)" id="third">
<br>
<i class="fab fa-accessible-icon"></i>
<br>
<div id="activeButton">
<p>Active!</p>
</div>
</button>
</div>
</div>
<div id="fourthMain" class="col-6">
<div id="colorPicker">
<button alt="Schwarzer Hintergrund, weiße Schrift" onclick="colorPicker(3)" id="fourth">
<br>
<i class="fab fa-accessible-icon"></i>
<br>
<div id="activeButton">
<p>Active!</p>
</div>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<router-outlet></router-outlet>

Answer 1

The given code has several errors in the HTML such as multiple instances of the same id.
The error that is most likely to be confusing browsers as they won't necessarily know how you want the code parsed is having a div (and also a p) element within a button element. This is not allowed in the spec. See for example div not allowed as child element of button
Run your code through the W3C validator to get the full details.
Then the best thing to do next is probably to change the button elements for div elements with class="button", change the CSS which refers to button to .button
And check and correct any other validation errors.
Then if the problem is not cured we are at least on solid ground for having a further look - particularly at the implementations of class="row" when an inner div has a height larger than the container such as you have in this example