iOS端Safari/Chrome中CSS Transform旋转动画出现故障

问题背景 #

网站加载器的3D旋转Logo在安卓、Windows主流浏览器运行正常，但iOS的Safari和Chrome中出现显示故障。

核心原因 #

iOS的WebKit内核对3D变换的渲染需要明确的透视上下文，同时动画与初始transform的叠加、WebKit前缀支持缺失会导致渲染错乱。

具体修复步骤 #

• 给加载器父容器添加透视效果，建立3D渲染空间
  WebKit内核需要父容器提供perspective属性才能正确解析子元素的3D变换，同时加上transform-style: preserve-3d确保子元素继承3D空间。
• 统一动画与初始状态的transform写法，添加WebKit前缀
  iOS浏览器对不带前缀的3D动画支持不完善，同时初始的rotateY(45deg)会和动画关键帧的transform冲突，建议把初始旋转整合到动画里，或者用transform的复合写法。
• 优化阴影与背面渲染
  添加backface-visibility: hidden避免元素背面渲染异常，同时确保box-shadow带WebKit前缀。

修改后的代码 #

HTML（无需改动） #

<div id="loader">
    <div id="loader_spin_div" class="d-flex justify-content-center">
        <img class="img-fluid mx-auto" id="loader_spin" src="assets/img/Logo_329x329.webp" width="500"
        height="500" alt="Refresh Your Browser To See The Animation!">
    </div>
</div>

CSS（关键改动标注） #

#loader {
    background: #ff9472;
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 2;
    /* 新增：给最外层容器添加透视，建立3D空间 */
    perspective: 1000px;
}

#loader_spin_div {
    width: 18vh;
    margin: auto;
    margin-top: 18vh;
    /* 新增：确保子元素继承3D空间 */
    transform-style: preserve-3d;
}

#loader_spin {
    /* 替换初始rotateY，整合到动画；添加WebKit前缀 */
    -webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
    border: 2px solid #fff;
    border-radius: 150px;
    display: block;
    -webkit-box-shadow: 11px -3px 48px 5px #fff;
    box-shadow: 11px -3px 48px 5px #fff;
    /* 新增：避免背面渲染异常 */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* 添加WebKit前缀的动画 */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    50% {
        -webkit-transform: rotateY(179deg);
        transform: rotateY(179deg);
    }
    100% {
        -webkit-transform: rotateY(360deg); /* 改为360deg，动画更平滑，避免跳变 */
        transform: rotateY(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotateY(0deg);
    }
    50% {
        transform: rotateY(179deg);
    }
    100% {
        transform: rotateY(360deg); /* 修复原1deg的跳变问题 */
    }
}

@media (min-width: 440px) {
    #loader_spin_div {
        width: 27vh;
    }
}

额外说明 #

• 把动画最后一帧从rotateY(1deg)改为rotateY(360deg)，避免旋转到末尾时的突兀跳变，同时让动画循环更流畅。
• 透视值1000px可以根据需求调整，数值越小透视效果越强，越大则越接近平面旋转。

内容的提问来源于stack exchange，提问作者Boolean-Autocrat