CSS transform issue Safari

Question

I have a flip animation on this page https://muttcase.com.au/products/call-my-mum-shes-lost-without-me it works perfectly in all browsers except safari..I've tried prefixes but I'm lost. the css im using is..

/* entire container, keeps perspective */
.product-single__photos {
perspective: 1000px;
}


.product-single__photos, .front, .back {
width: 320px;
height: 420px;
}

/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;

position: relative;
}

/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;

position: absolute;
top: 0;
left: 0;
}

/* front pane, placed above back */
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}

.flippy .flipper, .product-single__photos.flippy .flipper, .product-
single__photos.flip .flipper {

transform: rotateY(180deg);
}

Answer 1

Couple of issues I resolved to get it to work well in Safari:

1. Your .front element is empty. Check your HTML and, I assume you want this, put the #ProductImageWrapper... element inside of .front . This could be due to a syntax issue or an unclosed <div> tag in your HTML.
2. You don't need transform: rotateY(180deg) on both the .front and .back elements. Your code sample doesn't show it this way, but the code on the site you linked does.

The "Flip Tag" button then falls behind the elements because all of the elements in the preceding sibling are now (as you intended) position: absolute . Go ahead and post another question if you have issues with that one.