iOS上absolute元素滑动消失的根本原因是Safari合成层判定逻辑缺陷：未提升为独立渲染层且父容器缺定位上下文时，元素在帧切换中被临时裁剪；有效修复需同时设置-webkit-transform: translate3d(0,0,0)、transform: translate3d(0,0,0)及直接父容器position: relative。
为什么iOS上absolute元素滑动时会消失
根本原因不是“bug”，而是 Safari 渲染引擎对合成层（compositing layer）的判定逻辑：当 swiper 或其他滚动容器触发 transform 动画时，若 position: absolute 元素没有被主动提升为独立渲染层，它可能在帧切换中被临时剔除或裁剪——尤其在父容器未形成明确定位上下文时。
加 translateZ(0) 为什么常失效
translateZ(0) 确实能触发硬件加速，但在 iOS Safari（尤其是 15.x–16.2）中，它反而可能干扰层管理策略，导致更严重的闪烁或消失。官方文档和实测都表明，该写法不如 translate3d(0,0,0) 可靠，且不带 -webkit- 前缀时在旧版 Safari 中完全不生效。
- 只写
transform: translateZ(0)→ iOS 15.4 及以下基本无效 - 写
transform: translate3d(0,0,0)但漏掉-webkit-transform→ Safari 14–15.6 不识别 - 同时加
will-change: transform→ 可能加重内存压力，不推荐作为首选
真正有效的修复方式：双保险写法
必须同时满足两个条件：让元素有独立合成层 + 确保其定位基准清晰。缺一不可。
- 给绝对定位元素加：
-webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); - 确保它的**直接父容器**设置了
position: relative（哪怕只是占位用） - 避免父容器有
overflow: hidden，否则可能直接裁掉已提升的层 - 慎用
z-index过高值（如 9999），iOS 对超大 z-index 的层排序有时不稳定
swiper 场景下容易忽略的细节
uni-app 的 <swiper></swiper> 组件内部会动态创建多个 .uni-swiper-item，它们默认是 position: relative，但如果你在外层又包了一层自定义容器（比如 <view class="mask-wrap"></view>），而这个容器没设 position，那里面的 absolute 元素就实际锚定到了 <swiper></swiper> 本身——而 swiper 的实现可能在滑动中重置其 containing block，造成偏移或消失。
立即学习“前端免费学习笔记（深入）”；
最稳妥的做法是：把要固定显示的元素（如右上角按钮、进度条）直接放在 <swiper-item></swiper-item> 内部，并确保该 swiper-item 的 class 已显式声明 position: relative。
