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

Question

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!

Please try to provide a minimal, complete, and verifiable example: http://stackoverflow.com/help/mcve — nvioli, Nov 30 '16 at 18:22

score 44 · Answer 1 · answered Nov 30 '16 at 19:01

44

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

answered Nov 30 '16 at 19:01

Jayesh

531
3
4

11

It would be helpful to know which element this should be applied to and why this fixes the issue. – jdhildeb Aug 17 '21 at 18:21
2

2022... still an issue and this fixed it – Christophe May 12 '22 at 09:07
2022...amazing! – John Aps Oct 13 '22 at 11:59
It's really amazing. I had stuck with this issues for 1 weeks. Thanks. – Alchemist Dec 20 '22 at 22:23

score 22 · Answer 2 · answered Oct 21 '19 at 16:57

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.

Fixed a similar issue for me, ty. – Eric Apr 06 '23 at 20:17 — Eric, Apr 06 '23 at 20:17

score 7 · Answer 3 · answered Nov 30 '16 at 18:26

7

Note that z-index only works on positioned elements (position:absolute, position:relative, or position:fixed). An applicable fiddle would help but I'd suggest trying a few position tweaks on #inner-navbar & #slider.

answered Nov 30 '16 at 18:26

Syden

8,425
5
26
45

1

I've tried to add the position elements, it still doesn't work. The problem actually isn't the navbar - that stays above the slider on Safari. The problem is the #inner-logo leaf doesn't get put above the navbar in order to get the overhang effect. It is getting swallowed up by the navbar for some reason. – manicatorman Nov 30 '16 at 18:33
Hard to tell just by that, but I'd say your `z-index:1` & `z-index:-1` are not being recognized even though some browsers might. A simple example: https://jsfiddle.net/9ygwo9yj/1/ - you can uncomment `z-index:-1;` on `absolute` `div` and it will go below it's `relative`. – Syden Nov 30 '16 at 18:38
As an alternative you could try using `!important` or a higher `z-index` value such as `9999` on `#inner-logo`, but if the others do not impact it might not work either. – Syden Nov 30 '16 at 18:45

score 7 · Answer 4 · edited Nov 23 '21 at 10:46

7

I have a dropdown menu z-index not working and I have spent hours trying different things, but all does not work. Jayesh's answer gives me hint after I add it to my first line of CSS class

It is fixed like a charm.

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

edited Nov 23 '21 at 10:46

Owaiz Yusufi

849
1
14
34

answered Nov 15 '18 at 03:26

stoneskin

297
5
5

score 2 · Answer 5 · answered Nov 30 '16 at 19:56

2

The problem is the overflow:hidden element on the inner-navbarclass. I'm not sure why it worked on Chrome and Firefox with that being present.

answered Nov 30 '16 at 19:56

manicatorman

341
1
3
5

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

5 Answers5

Linked