Cannot see the full image with a fixed position on safari - html

Question

I have created a navbar using HTML and CSS. It works perfectly on IE, Opera, and Chrome.
However, on Safari the logo seems to be cut off. All I did was to add the position fixed to the logo to make the logo stick to the top of the page when the user scrolls down the page.
My HTML:
<div id="nav">
<div id="top-bar">
<div class="container">
<div class="left-right-nav">
<div class="left-nav-2">
<div>
<span></span>
<span><i class="fab fa-facebook"></i> <i class="fab fa-twitter"></i> <i class="fab fa-instagram"></i></span>
<span style="visibility: hidden;">ffff</span>
</div>
</div>
<div class="right-nav">
<div>
<span>01283 575 671</span>
<span>Join Now</span>
</div>
</div>
</div>
<div class="center-container">
<span style="padding:0;"><img src="https://via.placeholder.com/250x115" alt="" width="100%"></span>
</div>
</div>
</div>
<div class="nav-bg">
<div class="container">
<div class="left-right-nav">
<div class="left-nav">
<div>
<span>Facilties</span>
<span>Timetable</span>
<span>Blog</span>
</div>
</div>
<div class="right-nav">
<div>
<span>The Team</span>
<span>Events</span>
<span>Contact Us</span>
</div>
</div>
</div>
<div class="center-nav">
</div>
</div>
</div>
</div>
My CSS:
body{
margin:0;
}
#nav {
z-index: 999;
}
.left-container,
.center-container,
.right-container {
position: absolute;
display: inline-block;
margin: 0;
padding: 0;
width: calc(50% - 125px);
}
.left-container {
left: 0;
height: 50px;
overflow: hidden;
}
.left-container span {
margin: auto;
left: 0;
right: 0;
position: absolute;
}
.center-container {
width: 250px;
height: 115px;
z-index: 2;
left: 0;
right: 0;
margin: auto;
}
.right-container {
right: 0;
height: 50px;
overflow: hidden;
}
.right-container span:last-child {
background: #081F2D;
width: 40%;
float: right;
}
.right-container span:last-child a {
color: #FFDE00;
}
.left-right-container {
background: #FFDE00;
height: inherit;
}
.left-container span,
.right-container span {
padding: 15px 15px;
font-weight: 500;
text-transform: uppercase;
width: 59%;
display: inline-block;
}
.left-container span a,
.right-container span a {
display: block;
color: #081F2D;
text-decoration: none;
text-align: center;
font-size: 17px;
}
#top-bar {
float: left;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 0px;
overflow: hidden;
width: 100%;
min-width: 650px;
min-height: 50px;
position: fixed;
z-index: 999;
}
.nav-bg {
width: 100%;
position: absolute;
top: 50px;
height: 50px;
z-index: 2;
margin-top: -1px;
}
.left-right-nav {
background-color: #EEEEEE;
height: inherit;
}
.left-nav,
.left-nav-2,
.center-nav,
.right-nav {
position: fixed;
display: inline-block;
width: calc(50% - 125px);
}
.left-nav,
.left-nav-2{
left: 0;
}
.center-nav {
width: 250px;
height: 50px;
z-index: 1;
left: 0;
right: 0;
margin: auto;
}
.right-nav {
right: 0;
}
/*.left-nav:after, .right-nav:after {
content: '';
display: inline-block;
width: 100%;
}*/
.left-nav div,
.left-nav-2 div,
.left-nav-2 div,
.right-nav div {
margin: auto;
left: 0;
right: 0;
position: absolute;
background-color: #EEEEEE;
text-align: right;
margin-left: -20px;
}
.left-nav-2 div{
background-color: #FFDE00;
}
.left-nav div span {}
.right-nav div span {
float: left;
}
.left-nav div span,
.left-nav-2 div span,
.right-nav div span {
display: inline-block;
}
.left-nav span a,
.left-nav-2 span a,
.right-nav span a {
padding: 15px 40px;
display: block;
font-size: 1rem;
text-align: center;
color: #081F2D;
text-transform: uppercase;
font-weight: 600;
text-decoration: none;
background-color: #EEEEEE;
}
}
The codepen to my problem is https://codepen.io/anon/pen/xymdmP

Answer 1

Try adding position: fixed; and -webkit-transform: translate3d(0, 0, 0); instead of on image tag style.
https://codepen.io/anon/pen/MPZPPy
Thanks