mask-image渐变在移动端不生效，因safari将transparent解析为#000、firefox不支持渐变、chrome需-webkit前缀；应改用#fff/#000灰度值，双写标准与webkit属性，并配mask-size、容器尺寸及svg备用方案。
mask-image 渐变在移动端不生效？先看 Safari 和 Firefox 的解析分歧
写了 mask-image: radial-gradient(circle, white 50%, transparent 70%) 却在 iPhone 上完全没反应，不是代码错了，是浏览器根本没按你想的解析：Safari 把 transparent 当作 #000（全显），Firefox（截至 2026 年中）压根不支持渐变值，整条声明被跳过；Chrome/Edge 必须同时有 -webkit-mask-image 才触发渲染。
改用灰度值统一行为：radial-gradient(circle, #fff 50%, #000 70%)——白显黑隐，三端一致。必须同时写两行：
mask-image: radial-gradient(circle, #fff 50%, #000 70%); -webkit-mask-image: radial-gradient(circle, #fff 50%, #000 70%);
-
mask-size: 100% 100%强制拉伸遮罩到容器宽高，避免 Safari 默认auto下缩成 0×0 - 别直接在
<img>上加 mask，套一层<div> 容器，并设明确尺寸（如 <code>width: 100%; aspect-ratio: 4/3;） - 禁用
transparent在渐变中，尤其不能用rgba(0,0,0,0)或hsla(...,0)，Safari 只认字面量transparent（但仅限于它支持的上下文）
想让圆形遮罩始终居中且半径占容器宽高的 40%？别硬算 mask-size
用 mask-size: 250% 250% 反推半径比例极易出错，且 radial-gradient 的圆心定位受 mask-position 和容器尺寸影响极大，响应式下漂移明显。
真要精确控制，切 SVG 更稳：
<svg width="0" height="0"><defs><mask id="circle-mask"><rect width="100%" height="100%" fill="#000"></rect><circle cx="50%" cy="50%" r="40%" fill="#fff"></circle></mask></defs></svg>
- CSS 中引用：
-webkit-mask: url(#circle-mask); mask: url(#circle-mask); - SVG 内部用百分比单位，天然响应式，无需 JS 或媒体查询
- 确保容器有
aspect-ratio或固定宽高，否则50%基准会漂移
遮罩层交互卡顿或点透？pointer-events 和 transform 是关键
遮罩入场动画卡顿，往往是因为碰了 top 或 margin-top —— 这会强制重排布局，低端安卓机掉帧明显。遮罩点不穿底层内容，常见于动态插入后漏设 pointer-events: auto 或误用 visibility: hidden。
- 入场动效必须用
transform: translateY(100%) → translateY(0)，配transition: transform 0.3s和will-change: transform - 全屏遮罩覆盖用
position: fixed; top: 0; right: 0; bottom: 0; left: 0;，别依赖100vh（iOS Safari 地址栏收起时会跳变） - 遮罩内嵌内容居中用
display: flex; align-items: center; justify-content: center，不用margin: auto或top: 50%; transform: translateY(-50%)（缩放时偏移不准） - 遮罩元素必须设
pointer-events: auto，且父级不能有pointer-events: none阻断
文字遮罩为啥看不见？color: transparent + background-clip:text 是刚需
写了 mask-image 但文字没反应，因为 mask-image 默认只作用于背景区域，对纯 color 文字无效。你其实在“遮一个透明空壳”。
必须三件套齐上：
.text-mask {
color: transparent;
background: linear-gradient(to right, #000, #fff);
background-clip: text;
-webkit-mask-image: linear-gradient(to right, #000, transparent);
mask-image: linear-gradient(to right, #000, transparent);
}
- 漏掉
background就等于没内容可遮，mask-image静默失效 - Firefox 不支持渐变值，所以
mask-image在它那里会被忽略，但至少background-clip: text还能保底显示文字颜色 - Safari 要求
-webkit-mask-image且渐变终点只能是transparent字面量，rgba(0,0,0,0)会被当黑处理
精细轮廓类效果（波浪、镂空、字母内孔）别硬扛渐变，SVG 是唯一可靠路径——渐变没有像素级控制力，也做不到跨浏览器一致行为。
