Невозможно увидеть полное изображение с фиксированной позицией в сафари

Question

Я создал панель навигации с использованием HTML и CSS.Он отлично работает на IE, Opera и Chrome.

Однако в Safari логотип кажется обрезанным.Все, что я сделал, это добавил положение, зафиксированное на логотипе, чтобы логотип прилипал к верхней части страницы, когда пользователь прокручивает страницу вниз.

Мой HTML:

<div id="nav">
  <div id="top-bar">
    <div class="container">
      <div class="left-right-nav">
        <div class="left-nav-2">
          <div>
            <span><a href="#" class="nav_first"></a></span>
            <span><a href="#"><i class="fab fa-facebook"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <i class="fab fa-twitter"></i> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="fab fa-instagram"></i></a></span>
            <span style="visibility: hidden;"><a href="#">ffff</a></span>
          </div>
        </div>
        <div class="right-nav">
          <div>
            <span><a href="#" style="    padding: 15px 93px;">01283 575 671</a></span>
            <span><a href="join.html" class="nav_last">Join Now</a></span>
          </div>
        </div>
      </div>
      <div class="center-container">
        <span style="padding:0;"><a href="index.html" style="position: fixed; z-index:1; top:0;"><img src="https://via.placeholder.com/250x115" alt="" width="100%"></a></span>
      </div>
    </div>
  </div>
  <div class="nav-bg">
    <div class="container">
      <div class="left-right-nav">
        <div class="left-nav">
          <div>
            <span><a href="facilities.html" class="nav_first">Facilties</a></span>
            <span><a href="timetable.html">Timetable</a></span>
            <span><a href="blog.html">Blog</a></span>
          </div>
        </div>
        <div class="right-nav">
          <div>
            <span><a href="team.html">The Team</a></span>
            <span><a href="#">Events</a></span>
            <span><a href="contact.html" class="nav_last">Contact Us</a></span>
          </div>
        </div>
      </div>
      <div class="center-nav">
      </div>
    </div>
  </div>
</div>

Мой 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;
    }


    }

Код для моей проблемы https://codepen.io/anon/pen/xymdmP

Answer 1

Попробуйте добавить position: fixed; и -webkit-transform: translate3d(0, 0, 0); вместо стиля тега изображения.

https://codepen.io/anon/pen/MPZPPy

Спасибо