SafariでZ-インデックスが機能しない - FirefoxとChromeでうまくいく

Question

Z-インデックスはSafariで正しく表示されませんが、ChromeとFirefoxでは正常に動作しています。 Safari固有のバグが何であるかわかりません。ここで

は、関連するコードです：

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

<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>

そしてここでは、ブラウザの違いを示すいくつかのイメージであるになります

私が使用しています

Chrome Safari

ブートストラップとJQueryの両方

ありがとうございました！

Answer 1

z-indexは、配置された要素（position:absolute、position:relative、またはposition:fixed）に対してのみ機能することに注意してください。適用可能な詐欺が助けるが、私は少しを試してみることをお勧めしたい#inner-navbar & #sliderをつけてpositionを微調整する。

Answer 2

これはおそらく問題はinner-navbarクラスのoverflow:hidden要素であるサファリ に-webkit-transform:translate3d(0,0,0);

Answer 3

をあなたの問題を解決する必要があります。 ChromeとFirefoxでなぜそれが動作しているのかわからない。