翻转动画在safari上不起作用

Question

我在我的网站上有一个翻转动画。它可以在PC和Android上的所有浏览器上运行，但不能在safari上运行。它会翻转，你会看到"back“牌的闪现，然后它就消失了，你只会得到一个白色的方块。我认为我设置了-webkit-，就像它应该被设置的那样，但是由于某些原因，它就是不工作。有谁有什么想法吗？

HTML：

<div class="card">
    <div class="face front hover">
        <img src="images/pawprints_edit.png" width="300" height="180" alt="sign up for al-van newsletter" id="news-img" class="d-inline-block col-md-12 img-fluid my-5 pt-2" />
        <p id="thanks" class="text-center"></p>
    </div>
    <div class="face back">
        <form name="mailForm" class="mail-form" autocomplete="on" novalidate>
            <div class="form-group mb-0 px-2">
                <label for="name">Name:</label>
                <input type="text" class="form-control form-control-sm" id="name" placeholder="John Doe">
            </div>
            <div class="form-group mb-0 px-2">
                <label for="email">Email Address:</label>
                <input type="text" class="form-control form-control-sm" id="email" placeholder="yourname@domain.com">
            </div>
            <div class="form-group mb-0 px-2">
                <label for="message">Please type your message:</label>
                <textarea class="form-control form-control-sm" id="message" cols="30" rows="4"></textarea>
                <input type="button" id="submit" value="Submit">
                <input type="button" id="cancel" value="Cancel">
                <p id="errorP" class="text-center"></p>
            </div>
        </form>
    </div>
</div>

CSS：

/* 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 */

和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);
}

我使用的是Boostrap 3框架。JS是自定义的，CSS取自在线教程。这个网站的链接是：http://www.al-van.org/jake我是在windows平台上开发的，没有要测试的iPhone，所以当我做更改时，我会让继父在他的iPhone上检查一下。到目前为止，什么都没有起作用。

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

Answer 1

我找到问题了。.card类似乎有一个默认的背景颜色，使整个窗体变成白色，翻转时会冲刷掉它的所有组件。当我删除这个默认的背景色并使其透明时。问题已解决。

Answer 2

将背面可见性添加到您的类- .card.is-flipped中，因为您也对其使用了转换