Z-Index funktioniert nicht auf Safari - gut auf Firefox und Chrome

Den Z-index nicht korrekt wiedergegeben, die auf Safari - aber es ist in Ordnung, auf Chrome und Firefox. Ich kann nicht herausfinden, was das Safari-spezifische Fehler wäre.

Hier ist der relevante code:

CSS:

.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;}

HTML:

<div class="row-fluid">
                            <div class="navbar subnav navbar-fixed-top" id="inner-navbar">
                                <div class="navbar-inner">
                                <div class="flex-container">
                               <span class="flex-item"><ul class="nav navbar-nav" id="inner-ul"> 
                             <li><a class="inner-buttons inner-buttons-left" href="/home/">HOME</a></li>
                                 <li><a class="inner-buttons inner-buttons-left" href="#">SHOP</a></li>
                                 <li><a class="inner-buttons inner-buttons-left" href="#">OPPORTUNITY</a></li>
                            </ul>
                                <ul class="nav navbar-nav">
                                <li href="#"><img id="inner-logo" src="http://placehold.it/120x100"></li></ul>
                                <ul class=" nav navbar-nav" id="inner-ul2">
                                <li><a class="inner-buttons inner-buttons-right" href="#">ABOUT US</a></li>
                                <li><a class="inner-buttons inner-buttons-right" href="#">HAPPENINGS</a></li>
                                <li><a class="inner-buttons inner-buttons-right" href="#">CONTACT</a></li></ul>
                                </span></div>       
    </div>
    </div>
    </div>

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

Und hier sind einige Bilder, die zeigen die Unterschiede zwischen den browser aussieht:

Chrome
Safari

Ich benutze sowohl Bootstrap und JQuery.

Danke für die Hilfe!

InformationsquelleAutor manicatorman | 2016-11-30
  1. 7

    Dies sollte wohl das Problem lösen auf safari
    -webkit-transform:translate3d(0,0,0);

    • Genial!!! Vielen, vielen Dank!
    InformationsquelleAutor Jayesh
  2. 5

    Beachten Sie, dass z-index funktioniert nur bei positionierten Elementen ( position:absolute , position:relative oder position:fixed). Die geltenden fiddle helfen würde, aber ich würde vorschlagen, versuchen ein paar position tweaks auf #inner-navbar & #slider.

    • Ich habe versucht, fügen Sie die position der Elemente, es funktioniert immer noch nicht. Das problem ist eigentlich nicht die navbar - das bleibt über dem Schieberegler auf Safari. Das problem ist die #inner-leaf-logo nicht oben die Navigationsleiste, um den überhang-Effekt. Langsam wird es verschlungen von der Navigationsleiste aus irgendeinem Grund.
    • Schwer zu sagen, aber ich würde sagen, Ihr z-index:1 & z-index:-1 werden nicht anerkannt, auch wenn einige Browser könnten. Ein einfaches Beispiel: jsfiddle.net/9ygwo9yj/1 - Sie können die Auskommentierung z-index:-1; auf absolute div und es geht unter, es ist relative.
    • Als alternative könnten Sie versuchen, mit !important oder eine höhere z-index Wert wie 9999 auf #inner-logo, aber wenn die anderen nicht beeinträchtigen, es könnte nicht funktionieren.
    InformationsquelleAutor Syden
  3. 1

    Das problem ist das overflow:hidden element auf der inner-navbarKlasse. Ich bin mir nicht sicher, warum es funktionierte auf Chrome und Firefox mit, dass vorhanden sein muss.

    InformationsquelleAutor manicatorman
  4. 0

    Ich habe ein dropdown-Menü z-index nicht funktioniert. und ich Stunden damit verbringen, zu versuchen, verschiedene Dinge, die aber alle nicht funktioniert.
    Jayesh Antwort gibt mir Hinweis, nachdem ich es in meiner ersten Zeile der css-Klasse

    Es fest wie ein Charme.

    {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
position: absolute;
z-index: 1000;

    }

    InformationsquelleAutor stoneskin
Schreibe einen Kommentar