Logo and button not showing on the header on Safari - html

Question

I'm using Bootstrap v4.0.0-alpha.6 and I'm facing some issues with the navigation menu on Safari starting from 8 and down.
The logo at the left is an image and two buttons('Login', 'Sign Up') at the right are not shown on Safari, I used a live testing website for simulating Safari 6 and I inspected the element and I see that they are in the Dom and taking space in the header, But none of them is shown.
Here is a fiddle: http://jsfiddle.net/h6rc4d7g
Live preview:
.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 -->
What is causing this issue and how to solve it?!