Логотип и кнопка не отображаются в заголовке Safari

Question

Я использую Bootstrap v4.0.0-alpha.6, и у меня возникают некоторые проблемы с навигационным меню в Safari, начиная с 8 и ниже.

Логотип слева - это изображение и двакнопки («Войти», «Зарегистрироваться») справа не отображаются в Safari, я использовал веб-сайт живого тестирования для имитации Safari 6, и я проверил элемент, и я вижу, что они находятся в Dom и занимают место в заголовке, Но ни один из них не отображается.

Вот скрипка: http://jsfiddle.net/h6rc4d7g

Предварительный просмотр в реальном времени:

.btn-red{
  background: #d9534f;
  color: #fff !important
}

<!-- Fontawesome 4 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- Bootstrap v4.0.0-alpha.6 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<!-- tether -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.4/js/tether.min.js"></script>

<!-- Bootstrap v4.0.0-alpha.6 JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

<nav class="navbar navbar-toggleable fixed-top">
  <div class="container hidden-md-down">
    <div class="navbar-collapse clearfix">
      <a class="navbar-brand float-left" href="#">
        <img class="mt-1" src="http://placehold.it/1121x171/200" width="200" alt="logo">
      </a>
      <div class="text-center" style="margin: 0 auto; margin-top: 5px; ">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link hiw-link" href="#home">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link hiw-link" href="#blog">Blog</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#contact">Contact</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#about">About</a>
            </li>
        </ul>
      </div>
      <div class="float-right ml-auto" style="margin-top: 5px; ">
        <ul class="navbar-nav float-right ">  
          <li class="nav-item">
            <a class="nav-link" href="/login">Login</a> 
          </li>
          <li class="nav-item">
            <a class="btn btn-red nav-button" href="/new">Sign up</a> 
          </li>
        </ul>
      </div>
    </div> <!-- .navbar-collapse -->
  </div> <!-- .hidden-md-down -->
  <div class="hidden-lg-up">
    <a class="navbar-brand py-0 float-left mt-3" href="#">
      <img style="margin-top: 7px" src="http://placehold.it/1121x171/200" width="150" alt="logo">
    </a>
    <a class="btn mobile_header_button float-left btn-red mt-3" href="/new">Sign up</a> 
    <a class="navbar-toggle navbar-toggler-right gray-light float-right" data-toggle="collapse-side" data-target=".side-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="fa fa-bars"></span>
      </a>
  </div> <!-- .hidden-lg-up -->
</nav> <!-- .navbar -->

Что является причиной этой проблемы и как ее решить?!