移动端适配中，opacity渐变最稳妥，但局部渐隐必须用mask-image并绕开safari旧版兼容问题；opacity过渡失效常见原因包括值未变、display:none、父级opacity叠加、硬件加速延迟；mask-image需用#fff→#000、设mask-size、加-webkit前缀，ios15.3以下需伪元素降级。

移动端适配中，用 opacity 做透明度渐变最稳妥；但若要「局部渐隐」（比如文字右侧淡出），必须用 mask-image，且得绕开 Safari 旧版本的坑。

transition: opacity 在 iOS 上为什么不动？

不是不支持，而是常被以下行为卡住：

• opacity 值没真正改变：比如从 opacity: 1 改成 opacity: 1.0，浏览器认为数值相等，不触发重绘
• 元素被设了 display: none —— 它完全脱离渲染树，opacity 过渡彻底失效；应改用 visibility: hidden + opacity: 0
• 父级设置了 opacity: 0.8，子元素再调 opacity 只是在 0.8 基础上缩放，视觉变化微弱甚至不可见
• 启用了 transform: translateZ(0) 或其他硬件加速属性，部分 iOS 14–15 的 WebKit 版本会延迟或跳过 opacity 过渡

mask-image 实现局部透明渐变的写法

想让一段文字右边“慢慢消失”，不能靠 opacity（它会让整段字发虚），得用遮罩。关键点是颜色语义和 Safari 兼容：

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

• 遮罩色必须用 #fff（显示）→ #000（隐藏），别写 transparent —— 它在 mask 中等价于黑，会导致整个区域不可见
• 必须显式设置 mask-size: 100% 100%，否则默认平铺或缩放失真，尤其在 flex / responsive 容器里
• Safari ≤ iOS 15.3 不支持 mask-image: linear-gradient()，需降级：用 ::before 伪元素盖一层 background: linear-gradient(to right, #fff, rgba(255,255,255,0))，再加 pointer-events: none 保证点击穿透
• 务必加 -webkit-mask-image 前缀，且 Safari 旧版只认单值写法，不能带 to right，得写成 -webkit-mask-image: -webkit-linear-gradient(left, #fff, #000)

移动端性能与 fallback 策略

在低端 Android 或老 iOS 设备上，mask-image 可能引发重绘卡顿，而 opacity 几乎无负担。所以实际项目中建议分层处理：

• 基础层：用 opacity + transition 实现整体淡入淡出，兼容所有设备
• 增强层：通过 @supports (mask-image: none) 检测支持后，再覆盖局部渐隐逻辑
• 避免在滚动容器内高频触发 mask 动画（如 mask-position 连续变化），iOS WebKit 容易掉帧；改用 CSS animation + will-change: mask-position 提前提示渲染引擎
• 伪元素 fallback 要注意 z-index 层级和 overflow: hidden 冲突，测试时务必在真机 Safari 上验证裁剪是否准确

真正麻烦的不是写法，而是 Safari 对 mask-image 的支持断层——iOS 15.4 是分水岭，之前版本要么不支持，要么只认 radial-gradient 或 url()。如果目标用户包含大量 iOS 14 用户，直接放弃 mask-image，用伪元素模拟更省心。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！