Question

我做了一个简单的页面，当用户单击该div时在“ card” 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>

翻转效果是通过transform，transition和transform-style类完成的，因此我发现iOS Safari无法正确支持它们，因此我添加了-webkit-transform，-webkit-transition和-webkit-transform风格的类……但是当我在BrowserStack中测试它时，它仍然坏了（我没有Mac或iOS设备）。我制作了一个Codepen 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的东西。

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

1 个答案: