Question

我在网站上创建了一些翻转框，效果很好 - 在Chrome中，但出于某种原因他们不在Safari中工作。我对javascript很新，我实际上在Stack Overflow上有一些惊人的帮助来创建这些翻转盒。我只是无法弄清楚这是javascript，css还是其他问题。

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

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

任何帮助都会非常棒。谢谢。

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

我认为这是css问题，因为有时候野生动物园的css不起作用正常。它在safari和chrome上的工作。

Try It

Demo

Answer 2

问题似乎出现在backface-visibility的供应商前缀属性中。

目前你将它们写成：

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

将所有规则改写为：

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

这应该可以解决您在Safari中的问题，因为它会从-webkit供应商前缀的CSS属性中选择值。

翻转框工作在chrome但不是Safari - jQuery或Css问题？

2 个答案: