Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Z-Index not working on Safari - fine on Firefox and Chrome

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!

like image 953
manicatorman Avatar asked Nov 30 '16 18:11

manicatorman


People also ask

Does Safari support Z index?

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.

Why is Z Index not working?

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.

What does Z index to HTML?

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


2 Answers

This should probably fix your issue on safari -webkit-transform:translate3d(0,0,0);

like image 145
Jayesh Avatar answered Sep 19 '22 08:09

Jayesh


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.

like image 22
coreyward Avatar answered Sep 20 '22 08:09

coreyward