Bootstrap fixed navbar is glitchy and shaky on scrolling

问题

In Safari when you scroll navbar starts to shake. Sometimes it shakes just a little, sometimes its all over the place.

However, when you resize the page to the point of collapsing and then resize it back to the full view, this shaky and glitchy stuff disappears completely.

It only occurs in Safari and works totally fine in other browsers. My problem is exactly like the one here Bootstrap fixed navigation jumps when scrolling. I have tried all known solutions like

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

and

header { -webkit-backface-visibility: hidden; backface-visibility: hidden; position: fixed; z-index: 1000; }

but this shaky stuff is still there.

Just scroll up/down slowly and you will notice it.

Here is the link - 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>

来源：https://stackoverflow.com/questions/50811720/bootstrap-fixed-navbar-is-glitchy-and-shaky-on-scrolling

标签

css

twitter-bootstrap-3