旧版Android WebView（4.4–6.0）完全不支持mask-image及-webkit-mask-image，需用clip-path+opacity降级；禁用data:URL SVG、PNG遮罩和background-clip:text组合；文字遮罩改用text-shadow或translateX()动效。
旧版Android WebView不支持mask-image，直接忽略声明
Android 4.4–6.0 的系统 WebView（基于旧版 Blink/WebKit）压根不解析 mask-image，连带 -webkit-mask-image 也静默跳过——不会报错，也不会 fallback，页面就“少了一块效果”。你写的渐变、SVG、PNG 遮罩全当没看见。
降级方案必须绕开 mask-image，用 clip-path + opacity 组合模拟
不能指望 polyfill 或 JS 注入 CSS 属性，旧 WebView 对 CSS.supports('mask-image', 'none') 也返回 false。唯一可靠路径是检测环境后切换样式策略：
- 通过 UA 字符串识别 Android 4.4–6.0（
navigator.userAgent.includes('Android 4.') || navigator.userAgent.includes('Android 5.') || navigator.userAgent.includes('Android 6.0')） - 对目标元素加降级 class，比如
.mask-fallback - 用
clip-path做硬裁切（如clip-path: inset(0 0 0 20px)模拟左向淡出），再配合opacity分段控制可见性（例如用多个伪元素叠加渐变透明度） - 避免用
radial-gradient或复杂 SVG —— 旧 WebView 的clip-path支持也有限，只认基本形状和简单 inset
别碰 background-clip: text + mask-image 的文字遮罩组合
这个组合在旧 Android 上三重失效：background-clip: text 不被支持、mask-image 不被识别、color: transparent 却会让文字彻底消失。结果就是文字“凭空不见”，连 fallback 文字都看不到。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 文字类遮罩降级必须保留可读文本，用
text-shadow模拟边缘柔化（如text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000） - 若需“擦除”动效，改用
transform: translateX()移出容器 +overflow: hidden，比依赖 mask-position 动画靠谱得多 - 所有降级样式必须写在独立 class 中，且放在标准
mask-image规则之后，靠层叠覆盖
内联 SVG mask 在旧 Android 上不仅无效，还可能触发渲染崩溃
有开发者尝试把 SVG 写进 mask-image: url("data:image/svg+xml;base64,...") 来绕过文件请求，但在 Android 5.1 的 WebView 中，base64 解码会卡死主线程，导致页面白屏数秒。这不是资源大小问题，是引擎对 data URL 的 SVG 解析器存在已知 bug。
所以：
- 绝对不要在旧 Android 环境下使用任何
url(data:...)形式的mask-image - PNG 遮罩图也不行——旧 WebView 不支持 PNG 的 alpha 通道作为遮罩源，一律当全黑处理
- 真要加载外部遮罩图，只能退到
clip-path: url(#myclip)+ 内联 SVG<defs>，但仅限 Android 6.0+，且必须确保 SVG 在 DOM 就绪前已存在
