javascript - 翻转框在 chrome 中有效，但在 Safari 中无效 - jQuery 或 Css 问题？

Question

我在网站上创建了一些翻转框，效果很好 - 在 Chrome 中，但由于某些原因它们在 Safari 中不起作用。我是 javascript 的新手，实际上我在 Stack Overflow 上得到了一些惊人的帮助来创建这些翻转框。我只是不知道这是 javascript、css 还是其他问题。

如果您想查看，该站点是 www.dangoodeofficial.co.uk并且有问题的翻转框是顶部的 SAX 和 DJ 部分 - “更多信息”按钮触发翻转。

我尝试在 safari 中使用调试器，但我真的不知道我在寻找什么。

任何帮助都会很棒。谢谢。

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.

试一试

Demo