CODEWITHSUNDEEP
jquerycsscross-browserz-index
Adeerlike
Adeerlike

Reputation: 467

z-index behaves differently in firefox

i have the following code

#flipper #Front {
    z-index:81;
}
#flipper #Back {
    z-index:80;
}
.face{
    position:absolute;
    width:100%;
    height:100%;
}
.front{
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
}
#flipper > * {
    max-width:100px;
    cursor:pointer;
}


       <div id='flipper'>
        <div id='Front' class='front face'>
            <img src='images/front.gif'>
        </div>
        <div id='Back' class='back face'>
            <img src='images/back.gif'>
            <a href="/link" title="get in /here/" style="position: relative; top: -100px; display:none;">peek</a>
        </div>

    </div>

and script

/* flip */

function flipOwlly() {
        if (Side=='front') {
                jQuery('#flipper').css('-webkit-transform','rotateY(180deg)');
                jQuery('#flipper').css('-moz-transform','rotateY(180deg)');
                jQuery('#Front').css('z-index','79');
                jQuery('#flipper a[href="/login"]').css('display', 'inline-block');
                Side = 'back';
        } else {
                jQuery('#flipper').css('-webkit-transform','rotateY(360deg)');
                jQuery('#flipper').css('-moz-transform','rotateY(360deg)');
                //setTimeout(jQuery('#Front').css('z-index','81'), 550);
                jQuery('#Front').css('z-index','81');
                owllySide = 'front';
        }
        return false;
}

EDITED TO ADD JS CODE

and i have a jquery code to run css animation for flipping the whole #flipper element, and then changing the front z-index to 79 [and back].

my problem is that this displays differently on firefox and chrome. in firefox, higher z-index number send my image back! so when the page loads, the logical order is ok, but the back image is on top of the front on....

even IE renders it fine! whats going on?

Upvotes: 0

Views: 996

Answers (2)

Adeerlike
Adeerlike

Reputation: 467

the way i fixed this was kind of workaround, which i really dont like, but it was the only way i could find..

since i have 2 div for each side, i simply 'display:none'-ed the back face one, so even if a browser wrongfully decides to display it, it won't!

Upvotes: 0

Amit
Amit

Reputation: 1184

Posting your jquery code could help. Anyway, I tested flipping the z-index and it seems to be working:

$(document).ready(function()
{
    $("#flipper").click(function()
    {
        $("#Front").css("z-index", $("#Front").css("z-index") == "79" ? "81" : "79"); 
    });
});

However, if you are just trying to toggle between the images, it would be better to toggle their visibility rather than their z-indexes:

#flipper #Back 
{
    display: none;
}

$(document).ready(function()
{
    $("#flipper").click(function()
    {                     
        $("#Front").toggle();
        $("#Back").toggle();
    });
});

Upvotes: 2

Related Questions