Z-Index not working on Safari - fine on Firefox and Chrome
<p>The Z-index isn't rendering properly on Safari - but it is working fine on Chrome and Firefox. I can't figure out what the Safari specific bug would be. </p>

<p>Here is the relevant code: </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.flex-container{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        }

        .flex-item{
        margin-left: 14%;}


        #inner-ul2{
        margin-left: 70px;}


        #inner-navbar{
        z-index: 1;
        background-color: white;
        overflow: hidden;
        margin-top: 50px;
        box-shadow: 0px 10px 10px #444444;}

        .inner-buttons{
        background-color: white;
        overflow: hidden;
        color: black;
        font-family: Roboto;
        font-weight: 300;
        font-size: large;}

        .inner-buttons-left{
        overflow: hidden;
        margin-right: 45px;}

        .inner-buttons-right{
        overflow: hidden;
        margin-left: 40px;}


        #inner-logo{
        position:fixed;
        z-index: 2;
        display: inline-block;
        float: none;
        height: 100px;
        width: 120px;
        margin-top: -20px;
        margin-left: -25px;
        margin-right: auto;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        box-shadow: 0px 20px 10px -10px #444444;
        }

        .navbar .navbar-nav{
        display: inline-block;
        float: none;
        vertical-align: middle;}


        #slider{
        z-index: -1;
        padding: 0;
        overflow: hidden;
        border-style: none;
        margin-top: 30px;
        margin-bottom: 0px;}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row-fluid"&gt;
                            &lt;div class="navbar subnav navbar-fixed-top" id="inner-navbar"&gt;
                                &lt;div class="navbar-inner"&gt;
                                &lt;div class="flex-container"&gt;
                               &lt;span class="flex-item"&gt;&lt;ul class="nav navbar-nav" id="inner-ul"&gt; 
                             &lt;li&gt;&lt;a class="inner-buttons inner-buttons-left" href="/home/"&gt;HOME&lt;/a&gt;&lt;/li&gt;
                                 &lt;li&gt;&lt;a class="inner-buttons inner-buttons-left" href="#"&gt;SHOP&lt;/a&gt;&lt;/li&gt;
                                 &lt;li&gt;&lt;a class="inner-buttons inner-buttons-left" href="#"&gt;OPPORTUNITY&lt;/a&gt;&lt;/li&gt;
                            &lt;/ul&gt;
                                &lt;ul class="nav navbar-nav"&gt;
                                &lt;li href="#"&gt;&lt;img id="inner-logo" src="http://placehold.it/120x100"&gt;&lt;/li&gt;&lt;/ul&gt;
                                &lt;ul class=" nav navbar-nav" id="inner-ul2"&gt;
                                &lt;li&gt;&lt;a class="inner-buttons inner-buttons-right" href="#"&gt;ABOUT US&lt;/a&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;a class="inner-buttons inner-buttons-right" href="#"&gt;HAPPENINGS&lt;/a&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;a class="inner-buttons inner-buttons-right" href="#"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;
                                &lt;/span&gt;&lt;/div&gt;       
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;

            &lt;div class="row-fluid"&gt;
                &lt;div id="slider" class="flexslider"&gt;
                    &lt;ul class="slides"&gt;
                        &lt;li&gt;
                        &lt;img src="{{ url_for('static', filename='images/ProductsSlider.jpg') }}"&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                        &lt;img src="{{ url_for('static', filename='images/NaturalSlider.jpg') }}"&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                        &lt;img src="{{ url_for('static',         filename='images/ExcellSlider.jpg') }}"&gt;
                        &lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/div&gt;
                &lt;!--/div--&gt;
            &lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>And here are some images showing the differences between the browser looks:</p>

<p><a href="https://i.stack.imgur.com/g1t6v.jpg" rel="noreferrer">Chrome</a>
<a href="https://i.stack.imgur.com/4n2Tj.jpg" rel="noreferrer">Safari</a></p>

<p>I am using both Bootstrap and JQuery. </p>

<p>Thanks for the help!</p>