移动端CSS Paint API绘制自定义背景的核心瓶颈是性能与兼容性：Chrome on Android ≥93支持，但Safari和Firefox完全不支持，需降级fallback；常见空白原因包括协议非HTTPS/localhost、MIME类型错误、名称不匹配；高DPR适配需用ctx.canvas宽高及缩放系数；inputProperties须显式声明且大小写严格一致，paint()无状态、依赖CSS变量触发重绘。
移动端用 CSS Paint API 绘制自定义背景，核心瓶颈不在“能不能画”，而在“画得快不快、缩放糊不糊、重绘卡不卡”。Chrome on Android ≥ 93 支持，但 Safari 和 Firefox 完全不支持——这意味着你必须默认降级为纯 CSS 或 PNG fallback，不能指望它兜底。
为什么 background-image: paint(myPattern) 在手机上一片空白？
最常见原因不是代码错，而是加载链断了：
-
CSS.paintWorklet.addModule()必须走 HTTPS 或localhost，file://协议下静默失败，连错误都不报 - 模块 JS 文件响应头没设
Content-Type: application/javascript，尤其用python3 -m http.server时默认是text/plain，Chrome 直接拒载 - CSS 中写的
paint(myPattern)和 JS 里registerPaint('myPattern', )名字不一致（大小写、中划线、空格），结果就是透明背景 + DevTools 里“Paint flashing”完全不闪
paint() 里怎么适配高 DPR 屏幕？
geometry.width/geometry.height 是 CSS 像素，不是物理像素。直接用它们画图，在 iPhone 或安卓高端机上必然模糊。
- 别手动读
window.devicePixelRatio（worklet 线程里没有window） - 正确做法是：
ctx.canvas.width和ctx.canvas.height已自动按 DPR 缩放，直接用这两个值做坐标计算边界 - 绘图时所有尺寸（比如圆半径、线宽）也得乘以
ctx.canvas.width / geometry.width得到缩放系数，否则图形会变小 - 避免用
fillRect(0, 0, 100, 100)这种硬编码——改用fillRect(0, 0, size * scale, size * scale)
inputProperties 必须显式声明且大小写严格一致
没声明的 CSS 自定义属性，在 properties.get('--foo') 里永远返回 undefined，且不报错。你改了 el.style.setProperty('--foo', '42')，paint() 却纹丝不动——因为浏览器根本没监听这个变量。
立即学习“前端免费学习笔记（深入）”；
- 属性名要和 CSS 里完全一致：
--cell-size≠--cellSize - 如果要用数值计算，记得
parseFloat(props.get('--cell-size').value)，.toString()会丢单位，.value才是原始字符串 -
static get inputProperties() { return ['--cell-size', '--fg']; }必须写在 class 上，漏掉就等于没监听
真正容易被忽略的是：paint() 每次调用都是全新 canvas，不需要 clearRect()，也不该缓存任何状态；而动画驱动必须靠 CSS 变量变更触发重绘，不是靠时间戳或 requestAnimationFrame —— worklet 线程里根本没有这些 API。
