iOS白屏/卡顿主因是硬件加速失效或合成层破坏；需严格满足transform、opacity等条件触发GPU渲染，避免overflow:hidden与transform叠加，正确设置backface-visibility和perspective位置，并禁用transition与@keyframes混用。
绝大多数 iOS 白屏/卡顿不是代码写错，而是硬件加速触发失败或合成层被意外破坏。尤其在 iOS 16+（含 iOS 27）和 WKWebView 环境下，transform、opacity、will-change 的组合稍有偏差，就可能让渲染管线降级到 CPU 绘制，直接导致闪屏、掉帧甚至整页白屏。
为什么 iOS 上 transform 动画容易白屏？
iOS Safari 和 WKWebView 对「合成层创建条件」极其敏感。它不会像 Chrome 那样自动提升元素，必须显式满足多个条件才能启用 GPU 加速：
-
transform值不能是none或未声明（哪怕只是初始值） - 父容器不能有
overflow: hidden+transform双重限制（常见于弹窗遮罩层） -
backface-visibility: hidden必须加在动画元素自身，而非父级 -
perspective若用于 3D 效果，必须设在**直接父元素**上，设在 body 或 wrapper 外层基本无效
magic.css 在 iOS 上不触发动画的真正原因
它依赖 @keyframes + 初始 transform/opacity 差值驱动动画，但 iOS 会跳过「从终态出发」的动画——比如元素插入 DOM 时已带 magic-fade 类，或用 display: none 控制显隐。
- 确保元素初始无动画 class，且
visibility: visible、opacity: 1、transform: none - 添加动画 class 必须延迟一帧：
requestAnimationFrame(() => el.classList.add('magic-fade')) - 绝对不要和
transition混用——magic.css是纯@keyframes，叠加transition会导致 iOS 渲染冲突 - 检测是否支持：
typeof CSS.supports === 'function' && CSS.supports('animation', 'test')，返回false就该降级
App 端（uni-app / Cordova / Capacitor）的 3D 翻转为何必崩？
不是你 CSS 写得不对，是底层 WebView（iOS 用 WKWebView，Android 多用 X5）对 transform-style: preserve-3d 支持极差。v3.9.12+ 的 uni-app 仅修复了单层 rotateY，但禁用嵌套、禁用 perspective 链式传递。
- 放弃
preserve-3d，改用@keyframes+rotateY硬切：0deg → 180deg，手动控制正反面z-index和opacity -
perspective: 1000px必须写在翻转容器的**直接父元素**上（如.card-wrapper），不是全局或 body - 正反两面都加
backface-visibility: hidden，且反面额外加transform: rotateY(180deg)矫正镜像 - 避免在 Android 低端机用
transition: transform 0.6s，改用animation，否则重排开销大、卡顿明显
最易被忽略的一点：iOS 上任何涉及 scroll + transform 同时存在的场景（比如滚动吸顶 + 卡片旋转），都可能触发渲染管线争抢。此时别硬调，优先砍掉一个动效，或用 position: sticky 替代 transform: translateY。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
