mask-image不适合移动端图标适配，因其仅控制透明度而不改变盒模型边界和点击热区，导致iOS存在点击错位、缩放失真、滚动偏移三大硬伤；clip-path:path()才是可靠方案，可同步更新热区与布局，iOS Safari 16.4+和Android Chrome 100+已稳定支持。
mask-image 在移动端做异形图标适配，基本不可靠——iOS 存在点击错位、缩放失真、滚动偏移三大硬伤；Android WebView 支持尚可但不统一；Firefox 完全不支持。真正能落地的方案是 clip-path: path() 配合动态坐标计算。
为什么 mask-image 不适合移动端图标适配
它只控制透明度，不改变盒模型边界和点击热区。你在 iOS 上看到一个心形图标，实际点击区域仍是原始矩形框——用户点在“心尖”可能触发左侧 tab，点在“心底空白”反而跳转。这不是 bug，是 spec 本意：mask-image 不参与 hit-testing。
- iOS Safari 渲染 mask 区域会随
position: fixed元素滚动而偏移（WebKit 已知问题，无完美绕过） - 高清屏下 mask 边缘出现 1px 半透明晕染，因为未按
window.devicePixelRatio缩放遮罩图 - 你用
mask-image: url("heart.png")，但 PNG 若非纯黑+alpha 通道（比如带灰阶抗锯齿），在部分 Android WebView 中会渲染成全黑或全透
clip-path: path() 是当前唯一靠谱的替代方案
它直接裁剪盒模型边界，点击热区、布局占位、动画响应全部同步更新。iOS Safari 16.4+ 和 Android Chrome 100+ 已稳定支持 path() 语法，且可配合 JS 动态注入像素值适配不同屏幕。
- 路径必须基于容器宽高归一化：用
calc(100vw - 20px)或 JS 注入getBoundingClientRect()值，禁用写死px - 凹口/凸起造型需预留交互空间：例如中间 FAB 按钮直径为 56px，则凹口宽度建议设为
64px（+8px 间隙），深度 ≈28px * 0.7 ≈ 20px - 降级必须加：对 iOS clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)，否则直接显示矩形
如果非要试 mask-image，请只用于静态、非交互场景
比如背景装饰性水印、渐隐式图片标题、聚光灯悬停效果——这些不依赖精确点击、无滚动、无缩放的场合，mask-image 才有存在价值。
立即学习“前端免费学习笔记（深入）”；
- 用 CSS 渐变替代图片：如
mask-image: radial-gradient(circle at var(--x) var(--y), black, transparent 60%)，避免 PNG 加载失败或尺寸错配 - 确保遮罩图宽高比与目标元素一致，否则
mask-size: 100% 100%会拉伸变形 - 显式设置
mask-origin: border-box和mask-clip: border-box，避免各浏览器默认行为不一致
真正难的不是画出形状，而是让形状在横竖屏切换、键盘弹出、滚动锚点、不同 DPR 屏幕下都保持对齐、可点、不闪动。这些细节里，mask-image 几乎全军覆没，而 clip-path: path() 至少给出了可控的出口。
