L'index Z ne rend pas correctement le rendu sur Safari - mais fonctionne correctement sous Chrome et Firefox. Je ne comprends pas ce que serait le bogue spécifique à Safari.
Voici le code pertinent:
.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>
Et voici quelques images montrant les différences entre les apparences du navigateur:
J'utilise à la fois Bootstrap et JQuery.
Merci pour l'aide!
Cela devrait probablement résoudre votre problème sur safari -webkit-transform:translate3d(0,0,0);
Notez que z-index
ne fonctionne que sur les éléments positionnés (position:absolute
, position:relative
ou position:fixed
). Un violon applicable aiderait, mais je suggérerais d’essayer quelques ajustements position
sur #inner-navbar
& #slider
.
Le problème est l'élément overflow:hidden
de la classe inner-navbar
. Je ne suis pas sûr de savoir pourquoi cela a fonctionné sous Chrome et Firefox avec cette présence.
J'ai un menu déroulant z-index ne fonctionne pas. et je passe des heures à essayer différentes choses, mais tout ne fonctionne pas. La réponse de Jayesh me donne un indice, après que je l'ajoute à ma première ligne de classe de css
Ça s'est arrangé comme un charme.
{
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
position: absolute;
z-index: 1000;
}