转换和过渡在 iOS Safari 中不起作用

Question

我做了一个简单的页面，当用户单击"卡片"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 中没有得到适当的支持，所以我为每个类添加了 -webkit-transform、-webkit-transition 和 -webkit-transform-style 类......但是当我在BrowserStack中测试它时，它仍然坏了(我没有Mac或iOS设备(。我在这里做了一个代码笔。

.HTML：

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

.JS：

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

有人可以看看并告诉我什么会在iOS Safari(或者Mac桌面上的Safari(上休息一下吗？我不知道(？谢谢。

Answer 1

对于某些旧版本的iOS，您必须为transition和transform使用前缀属性。你应该使用这样的东西-webkit-transition: -webkit-transform.