Safari浏览器卡片翻转后左侧按钮无响应的解决方法

这是Safari对3D变换元素的点击事件命中检测bug导致的：当父元素（.card）和子元素（.back）同时应用rotateY(180deg)变换时，子元素内的左侧区域点击事件会被错误拦截。

修复方法 #

给.back元素的transform属性添加translateZ(1px)，让它在3D空间层级上略高于.front元素，确保点击事件能正确命中.back内的按钮：

.card .back {
    background-color: #0f0;
    /* 添加 translateZ(1px) 提升3D层级 */
    transform: rotateY(180deg) translateZ(1px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    box-sizing: border-box;
}

完整修改后的代码 #

<style>
    html,
    body {
        margin: 0;
        padding: 0;
    }
    .container {
        margin: auto;
        width: 200px;
        height: 200px;
        position: relative;
        perspective: 1000px;
    }
    .card {
        position: absolute;
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        transition: transform 1s;
    }
    .card.flip {
        transform: rotateY(180deg);
    }
    .card .front,
    .card .back {
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
    }
    .card .front {
        background-color: #f00;
    }
    .card .back {
        background-color: #0f0;
        transform: rotateY(180deg) translateZ(1px);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px;
        box-sizing: border-box;
    }
    button {
        cursor: pointer;
    }
    .button {
        position: fixed;
        top: 250px;
        left: 50%;
        transform: translateX(-50%);
    }
</style>

<body>
    <button class="button" onclick="document.querySelector('.card').classList.toggle('flip')">Flip card</button>
    <div class="container">
        <div class="card">
            <div class="front">Front</div>
            <div class="back">
                <button onclick="console.log('Left button clicked!')">Left</button>
                <button onclick="console.log('Right button clicked!')">Right</button>
            </div>
        </div>
    </div>
</body>

原理说明 #

Safari在处理嵌套3D变换时，可能会错误地将.front元素的点击区域保留在原位置，导致.back左侧按钮的点击被.front拦截。通过给.back添加translateZ(1px)，可以让它在3D视距中处于更高层级，确保点击事件优先传递给.back内的元素。

内容的提问来源于stack exchange，提问作者shanyuepeng