Bootstrap исправил navbar, глючный и шаткий при прокрутке

Question

В Safari при прокрутке навигационная панель начинает дрожать.Иногда он слегка дрожит, иногда повсюду.

Однако, когда вы изменяете размер страницы до точки свертывания, а затем возвращаете ее к полному виду, этот шаткий и глючный материал полностью исчезает.

Это происходит только в Safari и прекрасно работает в других браузерах.Моя проблема точно такая же, как здесь Bootstrap исправил переходы при прокрутке .Я пробовал все известные решения, такие как

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

и

header {-webkit-backface-visibility: hidden;видимость задней поверхности: скрытая;положение: фиксированное;z-индекс: 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>