Css 转换和转换在iOS Safari中不起作用

我做了一个简单的页面，当用户点击一个“card”div元素时，它会在这个div元素上显示短消息。我研究并找到了CSS类，可以用来让div看起来像用户点击时从前到后翻转。非常简单：卡的正面写着“单击我”，你单击它，卡就会翻转过来，显示我在JS中的字符串数组中定义的消息。再次单击，卡会翻转到前面，再次显示“单击我”。问题是，我刚刚了解到，尽管它在我所有的Windows浏览器和Android浏览器中都可以正常工作，但在iOS上的Safari中却无法正常工作。具体地说

单击卡正面后，翻转后，消息中的文本似乎会随机向后显示（？）。此外，并非总是如此……有时，Safari不需要等待卡上的点击/轻触按钮向后翻转，而是自己快速翻转，而无需等待。完全错了

示例：

<style>
body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        background: lavenderblush;
    }

    .scene {
        width: 200px;
        height: 260px;
        margin: 40px 0;
        perspective: 600px;

    }

    .card {
        width: 100%;
        height: 100%;
  -webkit-transition: transform 1s;
        transition: transform 1s;
  -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        cursor: pointer;
        position: relative;
        border-radius: 25px;
        background:white;
        border: 1px solid #CCC;
    }

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

    .card__face {
        position: absolute;
        width: 100%;
        height: 100%;
        color: white;
        text-align: center;
        font-size: 20px;
        backface-visibility: hidden;
        display: inline-block;
        border-radius: 25px;
    }

    .card__face--front {
        background-image: url("https://www.w3schools.com/html/pic_trulli.jpg");
        background-size: 100%;
        background-repeat: no-repeat;
        height:100%;
    }

    .card__face--back {
        background: lightskyblue;
  -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
        word-wrap: normal;
        line-height: 260px;
        height:100%;
        display: inline-block; 
        vertical-align: middle;
    }

    #message {
        line-height: 1.5;
        display: inline-block;
        vertical-align: middle;
    }

</style>

---

有人能看一下并告诉我iOS Safari（或者Mac桌面上的Safari？我不知道）的突破点是什么吗？谢谢。

对于一些较旧版本的iOS，您必须为

转换

和

转换

使用前缀属性。你应该使用这样的

-webkit转换：-webkit转换
嗯，你没读我的帖子吗？我表示我已经这样做了，但是Safari仍然错误地渲染变换/转换。
<div class="scene scene--card">
    <div class="card">
        <div class="card__face card__face--front">
            <span>Click Me!</span>
        </div>
        <div class="card__face card__face--back">
            <p id="message"></p>
        </div>
    </div>
</div>

var card = document.querySelector('.card');
var counter = 0;

var messages = [
    "Hello",
    "world",
    "How",
    "are",
    "you?"
];

card.addEventListener('click', function () {

    var whichCard = card.classList.value;
    if (whichCard == "card") {
        getMessage();
    }

    card.classList.toggle('is-flipped');
});

function getMessage() {
    //var randomIndex = Math.floor(Math.random() * messages.length); 
    document.getElementById("message").innerHTML = messages[counter];
    incrementCounter();
}

function incrementCounter() {
    counter++;
    if (counter >= messages.length) {
        counter = 0;
    }
}