Question

在Safari中滚动导航栏时开始摇晃。有时它只是摇晃一下，有时它遍布整个地方。

但是，当您将页面调整到折叠点然后将其调整回全视图时，这种不稳定和毛刺的东西会完全消失。

它只发生在Safari中，在其他浏览器中工作得很好。我的问题与此处的Bootstrap fixed navigation jumps when scrolling完全相同。我尝试了所有已知的解决方案，如

.navbar-fixed-top { -webkit-backface-visibility：hidden; }

和

标头{ -webkit-backface-visibility：hidden;背面 - 可见性：隐藏;位置：固定; z-index：1000; }

但这种不稳定的东西仍然存在。

慢慢向上/向下滚动，你会发现它。

以下是链接 - https://codepen.io/ceejaytaylor/pen/YvVqVK

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Alegreya+SC|Cormorant+Unicase|Tenor+Sans|Arsenal" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

<header>
  <nav class="navbar navbar-fixed-top">
    <div class="container-fluid">

      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="fa fa-th dropbut"></span>                      
        </button>

        <i class="fab fa-korvue"></i>
      </div>

      <div class="collapse navbar-collapse" id="myNavbar">

      <ul id="collapse_menu" class="nav navbar-nav text-center">
        <li><a class="link_icon scroll" name="1" href="#top_page_scroll">Начало</a></li>
        <li><a class="link_icon scroll" name="2" href="#about_me_scroll">Обо мне</a></li>
        <li><a class="link_icon scroll" name="3" href="#portfolio_scroll">Услуги</a></li>
        <li><a class="link_icon scroll" name="4" href="#pricing_scroll">Цены</a></li>
        <li><a class="link_icon scroll" name="5" href="#contact_me_scroll">Регистрация</a></li>
      </ul>

      <div class="navbar-nav navbar-right vertical-align">
        <a id="phone_handset" class="fas fa-phone-volume hidden-xs" href="#"></a>
        <a id="phone_num" class="link_icon hidden-xs" href="#">110-223-456-78</a>
      </div>

     </div>
    </div>
  </nav>
</header>

Bootstrap固定导航栏在滚动时很不稳定且不稳定

0 个答案: