Question

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?

Answer 1

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!