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!

edited Nov 30 '16 at 19:47

nvioli

2,73331429

asked Nov 30 '16 at 18:14

manicatorman

5114

1

Please try to provide a minimal, complete, and verifiable example: stackoverflow.com/help/mcve

– nvioli
Nov 30 '16 at 18:22

add a comment |

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!

edited Nov 30 '16 at 19:47

nvioli

2,73331429

asked Nov 30 '16 at 18:14

manicatorman

5114

1

Please try to provide a minimal, complete, and verifiable example: stackoverflow.com/help/mcve

– nvioli
Nov 30 '16 at 18:22

add a comment |

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!

edited Nov 30 '16 at 19:47

nvioli

2,73331429

asked Nov 30 '16 at 18:14

manicatorman

5114

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!

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

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

html css twitter-bootstrap safari z-index

edited Nov 30 '16 at 19:47

nvioli

2,73331429

asked Nov 30 '16 at 18:14

manicatorman

5114

edited Nov 30 '16 at 19:47

nvioli

2,73331429

asked Nov 30 '16 at 18:14

manicatorman

5114

edited Nov 30 '16 at 19:47

nvioli

2,73331429

edited Nov 30 '16 at 19:47

nvioli

2,73331429

edited Nov 30 '16 at 19:47

nvioli

2,73331429

asked Nov 30 '16 at 18:14

manicatorman

5114

asked Nov 30 '16 at 18:14

manicatorman

5114

asked Nov 30 '16 at 18:14

manicatorman

5114

1

Please try to provide a minimal, complete, and verifiable example: stackoverflow.com/help/mcve

– nvioli
Nov 30 '16 at 18:22

add a comment |

1

Please try to provide a minimal, complete, and verifiable example: stackoverflow.com/help/mcve

– nvioli
Nov 30 '16 at 18:22

Please try to provide a minimal, complete, and verifiable example: stackoverflow.com/help/mcve

– nvioli
Nov 30 '16 at 18:22

add a comment |

4 Answers
4

active

oldest

votes

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

answered Nov 30 '16 at 19:01

Jayesh

1273

Awesome!!! Thank you so much!

– nad_rom
Feb 22 at 21:22

add a comment |

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

6,59741732

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

add a comment |

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

5114

add a comment |

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

It fixed like a charm.

{

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

position: absolute;

z-index: 1000;

}

answered Nov 15 '18 at 3:26

stoneskin

4113

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f40895387%2fz-index-not-working-on-safari-fine-on-firefox-and-chrome%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

4 Answers
4

active

oldest

votes

4 Answers
4

active

oldest

votes

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

answered Nov 30 '16 at 19:01

Jayesh

1273

Awesome!!! Thank you so much!

– nad_rom
Feb 22 at 21:22

add a comment |

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

answered Nov 30 '16 at 19:01

Jayesh

1273

Awesome!!! Thank you so much!

– nad_rom
Feb 22 at 21:22

add a comment |

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

answered Nov 30 '16 at 19:01

Jayesh

1273

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

answered Nov 30 '16 at 19:01

Jayesh

1273

answered Nov 30 '16 at 19:01

Jayesh

1273

answered Nov 30 '16 at 19:01

Jayesh

1273

answered Nov 30 '16 at 19:01

Jayesh

1273

Awesome!!! Thank you so much!

– nad_rom
Feb 22 at 21:22

add a comment |

Awesome!!! Thank you so much!

– nad_rom
Feb 22 at 21:22

Awesome!!! Thank you so much!

– nad_rom
Feb 22 at 21:22

add a comment |

answered Nov 30 '16 at 18:26

Syden

6,59741732

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

add a comment |

answered Nov 30 '16 at 18:26

Syden

6,59741732

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

add a comment |

answered Nov 30 '16 at 18:26

Syden

6,59741732

answered Nov 30 '16 at 18:26

Syden

6,59741732

answered Nov 30 '16 at 18:26

Syden

6,59741732

answered Nov 30 '16 at 18:26

Syden

6,59741732

answered Nov 30 '16 at 18:26

Syden

6,59741732

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

add a comment |

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

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

add a comment |

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

5114

add a comment |

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

5114

add a comment |

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

5114

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

5114

answered Nov 30 '16 at 19:56

manicatorman

5114

answered Nov 30 '16 at 19:56

manicatorman

5114

answered Nov 30 '16 at 19:56

manicatorman

5114

add a comment |

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

It fixed like a charm.

{

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

position: absolute;

z-index: 1000;

}

answered Nov 15 '18 at 3:26

stoneskin

4113

add a comment |

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

It fixed like a charm.

{

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

position: absolute;

z-index: 1000;

}

answered Nov 15 '18 at 3:26

stoneskin

4113

add a comment |

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

It fixed like a charm.

{

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

position: absolute;

z-index: 1000;

}

answered Nov 15 '18 at 3:26

stoneskin

4113

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

It fixed like a charm.

{

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

position: absolute;

z-index: 1000;

}

answered Nov 15 '18 at 3:26

stoneskin

4113

answered Nov 15 '18 at 3:26

stoneskin

4113

answered Nov 15 '18 at 3:26

stoneskin

4113

answered Nov 15 '18 at 3:26

stoneskin

4113

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ndtyjky