Css 翻转动画不适用于safari

我的网站上有一个翻转动画。它适用于PC和Android上的所有浏览器，但不适用于safari。它会翻转，你会看到一个“背面”卡片的闪光，然后它消失了，你只会得到一个白色的方块。我想我设置了

-webkit-

，就像应该设置的一样，但由于某种原因，它就是不起作用。有人有什么想法吗

HTML:

和JS：

/* flip animation script */

function flip() 
{
    'use strict';
    console.log("Flip is being triggered");
    var card = document.querySelector(".card");
    var face = document.querySelector(".front");
    var name = document.getElementById("name");
    var email = document.getElementById("email");
    var errorP = document.getElementById("errorP");
    if(card.removeEventListener)
        {card.removeEventListener("click", flip, false);}
    else if(card.detachEvent)
        {card.detachEvent("onclick", flip);}
    card.classList.toggle("is-flipped");
    face.classList.toggle("hover");
    name.style.background = "#fff";
    email.style.background = "#fff";
    errorP.style.display = "none";
}

/* Function to flip the card back over when canceled */

function cancelFlip()
{
    'use strict';
    console.log("Cancel has been activated");
    var card = document.querySelector(".card");
    var face = document.querySelector(".front");
    card.classList.toggle("is-flipped");
    face.classList.toggle("hover");
    setTimeout(function(){if(card.addEventListener){card.addEventListener("click",flip,false);}else if(card.attachEvent){card.attachEvent("onclick",flip);}console.log("setTimeout was triggered");}, 500);
}

我使用的是Boostrap3框架。JS是自定义的，CSS取自在线教程。该网站的链接是：我在windows平台上开发，没有iPhone要测试，所以我让继父在我做更改时在他的iPhone上检查。到目前为止，一切都不起作用

---

更新：看起来表单就在那里，我可以点击东西并输入文本，但你实际上看不到任何东西。它显示为一个白色正方形，什么都看不见。我将背面可见性从.face移动到了每个.front和.back，以查看这是否会有所不同。似乎没有。

将背面可见性添加到您的类-.card.is-fliped，因为您也在使用转换。

我发现了问题。似乎

.card

类有一个默认的背景色，它使整个表单变成白色，翻转时会洗掉所有的组件。当我删除此默认背景色并使其透明时。问题已经解决。

请参阅本主题的另一篇文章，这篇文章与使用背面可见性使mobile safari识别翻转有关：。别忘了调用你的函数，我没有看到你在代码中这样做？我看到了这一点，这就是为什么我使用-webkit backface visibility:hidden；但出于某种原因，它仍然不起作用。此外，我忘了在帖子中添加一个eventListener，它在单击时调用函数，但它确实存在于JS页面中。如果背面可见性在整个card元素上，它是否也会应用于。被翻转？由于该类正在应用于.card元素，该元素已具有backface-visibility。当我进行更改时，该表单不再可用或在PC浏览器上无法单击。添加

-webkit backface visibility:hidden；背面可见性：隐藏到我的.card类为我修复了问题。谢谢
/* form animation */

.scene {
    width: 100%;
    height: 300px!important;
    perspective: 1000px;
    -webkit-perspective: 1000px;
    border: none;
}

.card {
    width: 100%;
    height: 100%;
    position: relative;
    -webkit-transition: -webkit-transform 1s;
    transition: transform 1s;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    border: none;
}

.face {
    position: absolute;
    height: 100%;
    width: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.front {
    background: #98b98a;;
    -webkit-z-index: -1;
    z-index: -1
}

.front.hover {
    background: #98b98a;
    -webkit-z-index: 2;
    z-index: 2;
}

.back {
    background: #4c87a9;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -webkit-z-index: 1;
    z-index: 1;
}

.back [type=text]:hover {
    cursor: text!important;
}

.card.is-flipped {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.hover:hover {
    cursor: pointer;
}

/* End animation */

/* flip animation script */

function flip() 
{
    'use strict';
    console.log("Flip is being triggered");
    var card = document.querySelector(".card");
    var face = document.querySelector(".front");
    var name = document.getElementById("name");
    var email = document.getElementById("email");
    var errorP = document.getElementById("errorP");
    if(card.removeEventListener)
        {card.removeEventListener("click", flip, false);}
    else if(card.detachEvent)
        {card.detachEvent("onclick", flip);}
    card.classList.toggle("is-flipped");
    face.classList.toggle("hover");
    name.style.background = "#fff";
    email.style.background = "#fff";
    errorP.style.display = "none";
}

/* Function to flip the card back over when canceled */

function cancelFlip()
{
    'use strict';
    console.log("Cancel has been activated");
    var card = document.querySelector(".card");
    var face = document.querySelector(".front");
    card.classList.toggle("is-flipped");
    face.classList.toggle("hover");
    setTimeout(function(){if(card.addEventListener){card.addEventListener("click",flip,false);}else if(card.attachEvent){card.attachEvent("onclick",flip);}console.log("setTimeout was triggered");}, 500);
}