Flip boxes work in chrome but not Safari - jQuery or Css issue?

Question

I have created some flip boxes on a website, that work great - In Chrome, but for some reason they are not working in Safari. I am very new to javascript, I actually had some amazing help on Stack Overflow to create these flip boxes. I just can't figure out if this is javascript, css or another issue.

If you want to check it out the site is www.dangoodeofficial.co.uk and the flip boxes in question are the SAX and DJ section at the top - the "MORE INFO" button triggers the flip.

I tried using Debugger in safari but I don't really know what I am looking for.

Any help would be really great. Thank you.

CSS

.flip3D {
float: left;
display: block;
position: relative;
width: auto;
height: 675px;
}
.flip3D .front {
position: absolute;
-o-transform: perspective(600px)RotateY( 0deg);
-moz-transform: perspective(600px)RotateY( 0deg);
-ms-transform: perspective(600px)RotateY( 0deg);
-webkit-transform: perspective(600px)RotateY( 0deg);
transform: perspective(600px)RotateY( 0deg);
-o-transform-backface-visibility: hidden;
-moz-transform-backface-visibility: hidden;
-ms-transform-backface-visibility: hidden;
-webkit-transform-backface-visibility: hidden;
backface-visibility: hidden;
transition: -o-transform .5s linear 0s;
transition: -moz-transform .5s linear 0s;
transition: -ms-transform .5s linear 0s;
transition: -webkit-transform .5s linear 0s;
transition: transform .5s linear 0s;
width: 100%;
}   
.flip3D .back {
position: absolute;
-o-transform: perspective(600px)RotateY( 180deg);
-moz-transform: perspective(600px)RotateY( 180deg);
-ms-transform: perspective(600px)RotateY( 180deg);
-webkit-transform: perspective(600px)RotateY( 180deg);
transform: perspective(600px)RotateY( 180deg);
-o-transform-backface-visibility: hidden;
-moz-transform-backface-visibility: hidden;
-ms-transform-backface-visibility: hidden;
-webkit-transform-backface-visibility: hidden;
backface-visibility: hidden;
transition: -o-transform .5s linear 0s;
transition: -moz-transform .5s linear 0s;
transition: -ms-transform .5s linear 0s;
transition: -webkit-transform .5s linear 0s;
transition: transform .5s linear 0s;
width: 100%;
}
.flip3D .front.flip {
-o-transform: perspective(600px)RotateY( -180deg);
-moz-transform: perspective(600px)RotateY( -180deg);
-ms-transform: perspective(600px)RotateY( -180deg);
-webkit-transform: perspective(600px)RotateY( -180deg);
transform: perspective(600px)RotateY( -180deg);
}
.flip3D .back.flip {
-o-transform: perspective(600px)RotateY( 0deg);
-moz-transform: perspective(600px)RotateY( 0deg);
-ms-transform: perspective(600px)RotateY( 0deg);
-webkit-transform: perspective(600px)RotateY( 0deg);
transform: perspective(600px)RotateY( 0deg);
}
.flip3D2 {
float: left;
display: block;
position: relative;
width: auto;
height: 675px;
}
.flip3D2 .front2 {
position: absolute;
-o-transform: perspective(600px)RotateY( 0deg);
-moz-transform: perspective(600px)RotateY( 0deg);
-ms-transform: perspective(600px)RotateY( 0deg);
-webkit-transform: perspective(600px)RotateY( 0deg);
transform: perspective(600px)RotateY( 0deg);
-o-transform-backface-visibility: hidden;
-moz-transform-backface-visibility: hidden;
-ms-transform-backface-visibility: hidden;
-webkit-transform-backface-visibility: hidden;
backface-visibility: hidden;
transition: -o-transform .5s linear 0s;
transition: -moz-transform .5s linear 0s;
transition: -ms-transform .5s linear 0s;
transition: -webkit-transform .5s linear 0s;
transition: transform .5s linear 0s;
width: 100%;
}
.flip3D2 .back2 {
position: absolute;
-o-transform: perspective(600px)RotateY( 180deg);
-moz-transform: perspective(600px)RotateY( 180deg);
-ms-transform: perspective(600px)RotateY( 180deg);
-webkit-transform: perspective(600px)RotateY( 180deg);
transform: perspective(600px)RotateY( 180deg);
-o-transform-backface-visibility: hidden;
-moz-transform-backface-visibility: hidden;
-ms-transform-backface-visibility: hidden;
-webkit-transform-backface-visibility: hidden;
backface-visibility: hidden;
transition: -o-transform .5s linear 0s;
transition: -moz-transform .5s linear 0s;
transition: -ms-transform .5s linear 0s;
transition: -webkit-transform .5s linear 0s;
transition: transform .5s linear 0s;
width: 100%;
}
.flip3D2 .front2.flip2 {
-o-transform: perspective(600px)RotateY( -180deg);
-moz-transform: perspective(600px)RotateY( -180deg);
-ms-transform: perspective(600px)RotateY( -180deg);
-webkit-transform: perspective(600px)RotateY( -180deg);
transform: perspective(600px)RotateY( -180deg);
}
.flip3D2 .back2.flip2 {
-o-transform: perspective(600px)RotateY( 0deg);
-moz-transform: perspective(600px)RotateY( 0deg);
-ms-transform: perspective(600px)RotateY( 0deg);
-webkit-transform: perspective(600px)RotateY( 0deg);
transform: perspective(600px)RotateY( 0deg);
}

Javascript

<script type="text/javascript">

jQuery( document ).ready(function() {       
jQuery('.flip-btn-1').click(function(e) {
e.preventDefault();
jQuery(".front").toggleClass('flip');
        jQuery(".back").toggleClass('flip');
    });
});

jQuery( document ).ready(function() {       
jQuery('.flip-btn-2').click(function(e) {
e.preventDefault();
jQuery(".front2").toggleClass('flip2');
        jQuery(".back2").toggleClass('flip2');
    });
});

</script>

Answer 1

i think this is css issue because css on safari sometime dont work properly. its work at safari and chrome.

Try It

Demo

Answer 2

The problem seems to be in the vendor prefixed properties of backface-visibility .

Currently you have them written as:

-webkit-transform-backface-visibility: hidden;
-moz-transform-backface-visibility: hidden;
-ms-transform-backface-visibility: hidden;
-o-transform-backface-visibility: hidden;
backface-visibility: hidden;

Rewrite all those rules as:

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;

This should fix your problem in Safari as it will pick the value from the -webkit vendor prefixed CSS property.