Positioned element is off when on Safari` - html

Question

I have a button with arrows that is supposed to appear and move down when moused over. On Chrome and Firefox it works fine but when I open it up on Safari the arrows are too low- they aren't positioned correctly. I have heard about people specifying "top" and :left" but that doesn't seem to work for me. I don't know why this is but it seems to be due to the position: relative.
Code:
<a class="details" href="#scroll"> <span class="details__border--bottom">More Details</span>
</a>
<div class="top-portion__arrows">
<span class="top-portion__arrows--hide"></span>
<span class="top-portion__arrows--hide"></span>
<span class="top-portion__arrows--hide"></span>
</div>
a.details {
border: 2.5px solid white;
padding: 8px 62px;
padding-top: 11px;
font-family: 'Roboto', sans-serif;
font-size: 1.75rem;
background-color: rgba(214, 128, 0, 0.45);
color: white;
cursor: pointer;
position: relative;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
left: 50%;
top: 5%;
z-index: 1;
display: inline-block;
}
a.details:hover,
a.details:focus {
background-color: rgba(231, 147, 21, 0.25);
-webkit-transition: .5s ease-in;
-o-transition: .5s ease-in;
transition: .5s ease-in;
}
a.details:hover,
a.details:focus {
border: 3.5px solid white;
-webkit-transition: .15s;
-o-transition: .15s;
transition: .15s;
}
a.details:active {
background-color: rgba(247, 195, 100, 0.75);
-webkit-transition: .15s;
-o-transition: .15s;
transition: .15s;
}
.details__border--bottom {
display: inline-block;
padding: 2px 0px 4px;
margin: 0px 8px 0px;
position: relative;
}
.details__border--bottom:before {
content: '';
position: absolute;
width: 100%;
height: 0px;
border-bottom: 2.5px solid white;
bottom: 2px;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: -webkit-transform 0.25s ease-in-out;
-webkit-transition: -webkit-transform 0.45s ease-in-out;
transition: -webkit-transform 0.45s ease-in-out;
-o-transition: transform 0.45s ease-in-out;
transition: transform 0.45s ease-in-out;
transition: transform 0.45s ease-in-out, -webkit-transform 0.45s ease-in-out;
}
a:hover .details__border--bottom:before,
a:focus .details__border--bottom:before {
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
.top-portion__arrows {
position: relative;
width: 0%;
top: 10%;
left: 51.5%;
}
.top-portion__arrows .top-portion__arrows--hide {
opacity: 0;
display: block;
width: 120px;
height: 120px;
border-bottom: 3px solid white;
border-right: 3px solid white;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
margin: -85px;
}
a.details:hover + .top-portion__arrows .top-portion__arrows--hide,
a.details:focus + .top-portion__arrows .top-portion__arrows--hide {
opacity: 1;
-webkit-animation: animate .65s ease;
animation: animate .65s ease;
}
.top-portion__arrows .top-portion__arrows--hide:hover .details__border--full,
.top-portion__arrows .top-portion__arrows--hide:focus .details__border--full {
border: 2.5px solid white;
-webkit-transition: .2s ease-in;
-o-transition: .2s ease-in;
transition: .2s ease-in;
}
#-webkit-keyframes animate {
0%{
opacity: 0;
-webkit-transform: rotate(45deg) translate(-10px,-10px);
transform: rotate(45deg) translate(-10px,-10px);
}
50%{
opacity: .5;
}
100%{
opacity: 1;
-webkit-transform: rotate(45deg) translate(0px,0px);
transform: rotate(45deg) translate(0px,0px);
}
}
#keyframes animate {
0%{
opacity: 0;
-webkit-transform: rotate(45deg) translate(-10px,-10px);
transform: rotate(45deg) translate(-10px,-10px);
}
50%{
opacity: .5;
}
100%{
opacity: 1;
-webkit-transform: rotate(45deg) translate(0px,0px);
transform: rotate(45deg) translate(0px,0px);
}
}

Answer 1

You can detect whether a user is browsing on safari with some javascript and then if they are browsing on safari, style the buttons a certain way by changing the margin-left and margin-top. Here is the code to detect whether the user is on safari:
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('safari') != -1) {
if (ua.indexOf('chrome') > -1) {
alert("chrome") // Chrome
} else {
alert("safari") // Safari
}
}
Edit: Your full code:
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('safari') != -1) {
if (ua.indexOf('chrome') > -1) {
} else {
document.getElementById("btn1").style.marginTop = "80%"; }
}