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.
Here is the relevant 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;}
<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>
And here are some images showing the differences between the browser looks:
Chrome Safari
I am using both Bootstrap and JQuery.
Thanks for the help!
Bookmark this question. Show activity on this post. The Z-index isn't rendering properly on Safari - but it is working fine on Chrome and Firefox.
You set z-index on a static element By default, every element has a position of static. z-index only works on positioned elements (relative, absolute, fixed, sticky) so if you set a z-index on an element with a static position, it won't work.
Z Index ( z-index ) is a CSS property that defines the order of overlapping HTML elements. Elements with a higher index will be placed on top of elements with a lower index. Note: Z index only works on positioned elements ( position:absolute , position:relative , or position:fixed ).
This should probably fix your issue on safari -webkit-transform:translate3d(0,0,0);
If you're using translateZ
or translate3d
on another element on the site, you might find that a zeroed out translate3d
doesn't do you any good. It turns out that Safari considers the Z axis position of an object that has been transformed when determining where to draw it instead of utilizing z-index
.
Thus, this would result in the first div
showing above the second:
<div style="position: fixed; transform: translateZ(100px); z-index: 1;" /> <div style="position: fixed; transform: translate3d(0, 0, 0); z-index: 2;" />
The solution is to apply a greater-value z-axis transformation to the element you'd like drawn on the topmost layer:
.on-top { transform: translate3d(0, 0, 200px); }
It's still a good idea to keep the z-index
declaration for other browsers.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With