html - 在 safari 上看不到固定位置的完整图像

Question

我使用 HTML 和 CSS 创建了一个导航栏。它在 IE、Opera 和 Chrome 上完美运行。

但是，在 Safari 上， Logo 似乎被切断了。我所做的只是添加固定到 Logo 的位置，以便在用户向下滚动页面时使 Logo 粘在页面顶部。

我的 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

谢谢