CSS 3d transform animates under other elements in webkit only

Question

I have a fairly simple 3d transform which is essentially a bunch of flip cards which can be flipped front to back and vice versa. When they are flipped I want the animation to overlap the other cards. This works perfectly in Firefox however the animation occurs underneath the other cards in Webkit.

Fiddle is here: https://jsfiddle.net/ojdavey/kwf8vLLx/1/

If you click the "Flip" button in both Chrome/Safari and Firefox you'll see how it works differently.

I've tried a couple of things such as setting:

transform-style: flat

for the other cards while the card is flipping but that didn't seem to work.

Any help would be much appreciated!

Answer 1

A possible solution is to set the z-index on the parent container, when a card is flipped, like:

.box.flip.active {
    z-index: 1;
}

Remove this class from all elements and add it to the current card before you flip it either way. This works in Safari as well as in Chrome.

Demo

Try before buy

The demo includes the updated JavaScript code too. This is not optimized. It's only to demonstrate the behavior:

$(".flip .flip-button").on("click", function() {
    $('.col4').removeClass('active');
    $(this).closest(".col4").addClass('active');
    $(this).closest(".card").addClass("flipped");
});

$(".flip .close").on("click", function() {
    $('.col4').removeClass('active');
    $(this).closest(".col4").addClass('active');
    $(this).closest(".card").removeClass("flipped");
});