CSS动画z-index在iPadOS异常：React信封动画故障排查求助

问题描述 #

我开发了一个ReactJS模块，通过CSS动画实现信封打开、信纸弹出、信纸收回、信封关闭的效果。该动画在桌面端（Chrome、Opera、Firefox）及三星设备（Chrome、Firefox）上表现正常，但在iPadOS上出现两个异常：

• 在Safari、Firefox和Chrome中，信封盖在即将打开和关闭时会铺满整个屏幕的宽度和高度；
• 在iPad的Chrome中，当信纸处于顶部位置时，信封盖会遮挡住信纸。

尝试过调整z-index、设置动画中的translateX值以及修改opacity，但均未解决问题，已耗时2小时排查。

相关代码 #

.js文件 #

import React from "react";
import './EmailOpen.scss';

const contactEmail = 'email@email.com';

const EmailOpen = () => {
    return (
        <>
            <a href={ contactEmail } >
                <div className="wrapper">
                    <div className="mail">
                        <div className="cover"></div>
                        <div className="letter"><h1>@</h1></div>
                    </div>
                </div>
            </a>
        </>
    );
}
 
export default EmailOpen;

.scss文件 #

$envelopeWidth: 90px;
$envelopeHeight: calc($envelopeWidth * .6667);
$duration: 4s;
$borderRad: calc(0.0333 * $envelopeWidth);
$halfWidth: calc($envelopeWidth / 2);
$halfHeight: calc($envelopeHeight / 2);
$letterMove: calc(-0.67 * $envelopeHeight);

body {
    background-color: #000;
}

.wrapper {
    position: relative;
    top: calc(2vh);
    left: calc(50% - $halfWidth);
}

.mail {
    background: #aaa;
    position: relative;
    transform-style: preserve-3d;
    cursor: pointer;
    width: $envelopeWidth;
    height: $envelopeHeight;
    border-bottom-left-radius: $borderRad;
    border-bottom-right-radius: $borderRad;

    &:before {
        content:"";
        position: absolute;
        top: 0;
        right: 0;
        z-index: 5000;
        border-right: $halfWidth solid #fed;
        border-left: $halfWidth solid transparent;
        border-top: $halfHeight solid transparent;
        border-bottom: $halfHeight solid #fed;
        border-bottom-left-radius: $borderRad;
        border-bottom-right-radius: $borderRad;
    }

    &:after {
        content:"";
        position: absolute;
        top: 0;
        left: 0;
        z-index: 4000;
        border-left: $halfWidth solid #cba;
        border-right: $halfWidth solid transparent;
        border-top: $halfHeight solid transparent;
        border-bottom: $halfHeight solid #cba;
        border-bottom-left-radius: $borderRad;
        border-bottom-right-radius: $borderRad;
    }
}

.cover {
    &::before {
        content:"";
        position: absolute;
        top: 0;
        left: 0;
        z-index: 6000;
        transform-origin: top;
        transform: rotateX(0deg);
        animation: open $duration linear infinite;
        opacity: 1;
        border-left: $halfWidth solid transparent;
        border-right: $halfWidth solid transparent;
        border-bottom: $halfHeight solid transparent;
        border-top: $halfHeight solid #a98;
        border-bottom-left-radius: $borderRad;
        border-bottom-right-radius: $borderRad;
    }
}

@keyframes open {
    0%, 5% {
        transform: rotateX(0deg);
        z-index: 6000;
    }
    15%, 85% {
        transform: rotateX(180deg);
        z-index: 0;
    }
    95%, 100% {
        transform: rotateX(0deg);
        z-index: 6000;
    }
}

.letter {
    position: absolute;
    top: 0;
    background: #eee;
    left: calc($envelopeWidth * 0.05);
    width: calc($envelopeWidth * 0.9);
    height: calc($envelopeHeight * 0.95);
    border-radius: $borderRad;
    animation: letter $duration linear infinite;
    z-index: 2000;

    h1 {
        position: absolute;
        top: 10%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: green;
    }
    
    @keyframes letter {
        0%, 15% {
            transform: translateY(0);
        }
        25%, 75%  {
            transform: translateY($letterMove);
        }
        85%, 100% {
            transform: translateY(0);
        }
    }
}

问题原因分析 #

1. border绘制+3D变换的兼容性问题：iPadOS的WebKit内核对使用border绘制的元素进行3D旋转时，会出现边界计算错误，导致元素溢出容器铺满屏幕。
2. z-index在3D空间中的失效：动画中动态修改z-index的方式在iPadOS的3D变换场景下优先级不足，无法正确控制层级，导致信纸被遮挡。

修复方案 #

1. 替换信封盖的border实现为clip-path #

将.cover::before的border绘制方式改为用clip-path创建三角形，避免border渲染bug：

.cover {
    &::before {
        content:"";
        position: absolute;
        top: 0;
        left: 0;
        z-index: 6000;
        transform-origin: top;
        transform: rotateX(0deg);
        animation: open $duration linear infinite;
        opacity: 1;
        width: $envelopeWidth;
        height: $halfHeight;
        background: #a98;
        clip-path: polygon(0 0, 100% 0, 50% 100%);
        border-top-left-radius: $borderRad;
        border-top-right-radius: $borderRad;
    }
}

2. 用translateZ替代z-index控制3D层级 #

利用3D空间的translateZ属性替代动态z-index，确保层级控制在iPadOS下生效：

@keyframes open {
    0%, 5% {
        transform: rotateX(0deg) translateZ(10px);
    }
    15%, 85% {
        transform: rotateX(180deg) translateZ(-10px);
    }
    95%, 100% {
        transform: rotateX(0deg) translateZ(10px);
    }
}

同时移除原动画中的z-index设置，保留.mail的transform-style: preserve-3d确保3D空间生效。

3. 添加overflow:hidden限制元素溢出 #

给.mail添加overflow: hidden，防止任何元素超出信封容器范围：

.mail {
    // 原有属性保留
    overflow: hidden;
}

修复效果说明 #

• clip-path绘制的三角形在3D旋转时不会出现边界溢出，解决全屏铺满的问题；
• translateZ利用3D空间层级替代z-index，解决iPad Chrome中信纸被遮挡的问题；
• overflow: hidden确保所有元素被限制在信封容器内，避免意外溢出。

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