I recently viewed one of my websites on Safari and noticed that the buttons were being pushed to the far right of the screen (between 100-200%), causing unnecessary horizontal scrolling, while everything appeared as intended on Google Chrome. Here is a snippet of the code for reference:
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<meta content="width=device-width, initial-scale=1" name="viewport">
<style>
body {
background: linear-gradient(-15deg, #e77817 0%, #fff 20%, #fff 80%, #152d65 95%);
}
::-webkit-scrollbar{
width: 6px;
}
::-webkit-scrollbar-track{
border-radius: 4px;
}
::-webkit-scrollbar-thumb{
background: #152d65;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover{
background: #e77817;
}
#Logo{
width:27%;
}
h3{
font-size:25px;
font-weight:bold;
font-family:'ElMessiri Regular', sans-serif;
}
.poly {
margin-right: 2%;
margin-top: 1%;
width: 20%;
font-size: 18px;
font-family: "ElMessiri Regular";
}
#List {
display: flex;
justify-content: center;
}
a {
text-decoration: none;
color: white;
}
#plastic {
background: #152d65;
}
#plastic:hover {
color: #e77817;
}
#cares {
background: #009534;
}
#cares:hover {
color: #FFED00;
}
#medical {
background: #e77817;
}
#medical:hover {
color: #152d65;
}
</style>
</head>
<body>
<center>
<div id="Logo">
<img src="Images/Logo.png" class="img-responsive" alt="aaaaaaa">
</div>
<div id="Company_Name">
<h3> ABC Pvt Ltd </h3>
</div>
<br>
<div id="List" class="col-lg-12 container" style="height: 100%; width: 100%:">
<a class="col-lg-2 poly btn" id="plastic" href="aaa.html"><div>AAA</div></a>
<a class="col-lg-2 poly btn" id="cares" href="bbb.html"><div>BBB</div></a>
<a class="col-lg-2 poly btn" id ="medical" href="ccc.html"><div>CCC</div></a>
</div>
</center>
This issue was specifically detected on Safari Browser on MacOS. Interestingly, the website functions properly on iPhones. The problem seems to only affect the button placement, pushing them to the extreme right of the screen while all other elements remain unaffected.