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

Question

我做了一个简单的页面，当用户点击“卡片”div 元素时，它会在该 div 元素上显示短消息。我研究并找到了 CSS 类，用于使 div 看起来像在用户单击时从前向后翻转。很简单:卡片正面写着“Click me”，你点击它，卡片翻转过来，显示一条我在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>

翻转效果是通过 transform、transition 和 transform-style 类完成的，所以我认为这些在 iOS Safari 中没有得到正确支持，所以我添加了 -webkit-transform、-webkit-transition 和 -webkit-transform -style classes for each of these...但是当我在 BrowserStack 中测试它时它仍然坏了(我没有 Mac 或 iOS 设备)。我做了一个代码笔 here .

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。