Safari完全忽略mask-image声明是因为必须同时声明-webkit-mask-image与mask-image且顺序固定，仅写标准属性会静默跳过；URL含未编码特殊字符、缺少背景内容或使用transparent/rgba渐变也会导致失效。
为什么 Safari 完全忽略 mask-image 声明？
因为 Safari（包括 iOS 和 macOS 所有当前版本）仍强制要求 -webkit-mask-image 前缀，只写标准 mask-image 等于没写——它不会报错、不提示、不 fallback，而是直接跳过整条声明。
必须双写且顺序固定：mask-image 在前，-webkit-mask-image 在后。顺序颠倒或漏掉任一，Safari 就当没这回事。
-
mask-image: url(mask.svg); -webkit-mask-image: url(mask.svg);✅ -
-webkit-mask-image: url(mask.svg); mask-image: url(mask.svg);❌（部分 Safari ≤15.5 会级联失效） -
mask-image: url(mask.svg);❌（Safari 静默忽略）
mask-image: url() 在 Safari 中路径正确却仍不加载？
Safari 对 url() 内容极其敏感：空格、未编码的 #、换行、file:// 协议、CORS 跨域都会导致静默失败——DevTools 的 “Computed” 面板里 mask-image 显示为 none 就是这个原因。
移动端尤其危险：iOS Safari 会直接拒绝解析含特殊字符的 URL，图标“凭空消失”，连 network 请求都不发。
立即学习“前端免费学习笔记（深入）”；
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 优先用 base64 内联 SVG：
mask-image: url("data:image/svg+xml,%3Csvg...%3E"); - 避免
file://协议测试，改用本地 server（如python3 -m http.server） - URL 中的
#必须编码为%23，空格为%20 - 确保服务器返回正确的 MIME 类型（
image/svg+xml或image/png）
写了 mask-image 却看到全黑/全透明/什么都没有？
这不是 Safari 特有，而是所有浏览器共性：mask-image 不是“贴图”，它只读取遮罩源的亮度（luminance）或 alpha 通道，决定目标内容是否可见。白显、黑隐、灰半透——但前提是目标元素本身得有东西可遮。
常见静默失效链：mask-image 加了 → 元素没背景/没内容 → 遮完只剩透明 → 视觉上等于消失。
- 给目标元素加
background-color或background-image（哪怕只是background: #000） - 如果是
<img>，确保图片已加载且未被overflow: hidden截断 - 检查父级是否有
transform或will-change导致合成层异常 - 用 DevTools 的 “Computed” 面板确认
mask-image是否真被解析为有效值（不是none）
渐变遮罩 linear-gradient() 在 Safari 中表现诡异？
Safari 要求渐变颜色必须是纯灰阶（#000 / #888 / #fff），transparent 和 rgba() 会被转成 #000 或直接降级，结果就是全黑或全显。
Firefox 则更极端：目前仍完全忽略 mask-image: linear-gradient()，声明存在也等于没写。
- 别用
transparent，改用#000（隐藏）或#fff（显示） - 禁用
rgba(0,0,0,0)，Safari 解析不稳定 - 跨浏览器稳定方案：改用内联 SVG 作为
mask-image: url(#myMask)，在 SVG 中定义<mask>和<path> - 若必须用渐变，显式加
mask-mode: luminance并只用十六进制灰阶色
最易被忽略的点：Safari 对 mask-image 的解析是“全有或全无”——它不支持部分生效、不提供 warning、不 fallback 到默认行为。一旦某个环节出错（路径、前缀、颜色、内容），结果就是彻底不可见，而你可能还在反复检查 CSS 语法。
