CSS transition and z-index conflict

Question

For a new webdesign I'm trying to control two 50% width layers with CSS transitions and z-index, but there seems te be a conflict: the z-index seems to be too slow. As you can see in the fiddle, the white box is hidden behind the right slider div on hover, until the transition is complete. Is there an alternative that works faster? Or is there another way to do it? Any help would be much appreciated!

This is my CSS:

body {
    background:black;
}
div {
    -webkit-transition:opacity 0.6s ease, width 0.6s ease;
    transition:opacity 0.6s ease, width 0.6s ease;
}
.slide {
    position:absolute;
    top:0;
    bottom:0;
    width:50%;
    -webkit-transform:skew(-15deg);
    -moz-transform:skew(-15deg);
    -ms-transform:skew(-15deg);
    -o-transform:skew(-15deg);
    transform:skew(-15deg);
    z-index:2;
}
.slide:hover {
    width:60%;
    z-index:3;
}
.slide#left {
    left:0;
}
.slide#right {
    right:0;
}
.wrap {
    width:100%;
    height:100%;
    position:absolute;
    overflow:hidden;
}
.inner {
    width:100%;
    height:100%;
    -webkit-transform:skew(15deg) scale(1.5);
    transform:skew(15deg) scale(1.5);
    opacity:0.5;
    position:absolute;
}
.inner:hover {
    opacity:1;
}
.inner#left {
    background:url(//savado.nl/new/key.jpg) no-repeat center center;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -ms-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
}
.inner#right {
    background:url(//savado.nl/new/code2.jpg) no-repeat center center;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -ms-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
}
.slide .logo {
    position:absolute;
    z-index:99;
    top:50%;
    height:20%;
    padding-left:20%;
    background:white;
}
.logo#left {
    right:0;
    -webkit-transform:translateX(50%) translateY(-50%) skew(15deg);
    -moz-transform:translateX(50%) translateY(-50%) skew(15deg);
    -ms-transform:translateX(50%) translateY(-50%) skew(15deg);
    -o-transform:translateX(50%) translateY(-50%) skew(15deg);
    transform:translateX(50%) translateY(-50%) skew(15deg);
}
.logo#right {
    left:0;
    -webkit-transform:translateX(-50%) translateY(-50%) skew(15deg);
    -moz-transform:translateX(-50%) translateY(-50%) skew(15deg);
    -ms-transform:translateX(-50%) translateY(-50%) skew(15deg);
    -o-transform:translateX(-50%) translateY(-50%) skew(15deg);
    transform:translateX(-50%) translateY(-50%) skew(15deg);
}

And here's the fiddle!

PS: I'm new to posting questions of my own on this forum, so I'm sorry if I disobey any of the rules. Besides that, my English is not the best, since it's not my native language (I'm Dutch). But please help me out!

Answer 1

Looks Like the problem was only in Chrome but not in FF. What you need to do is set a smaller z-index on the wrapper container like this

.wrap {
  z-index:1;
}

That should fix it and here is the updated JSFIDDLE

Answer 2

Add z-index in your transition declaration. This should stop the z-index from executing before the transition

-webkit-transition:opacity 0.6s ease, width 0.6s ease,z-index 0.6s;
transition:opacity 0.6s ease, width 0.6s ease, z-index 0.6s;