移动端文字模糊主因是gpu双线性插值处理亚像素坐标，ios safari中translate3d(0,0,0)关闭亚像素抗锯齿，需math.round()对齐像素、避免非整数transform值，并优先确保合成层前字体渲染正常。
移动端开启 transform 硬件加速后文字模糊，不是“加速出错了”，而是浏览器把文字当纹理上传 GPU 后，被迫用双线性插值处理非整数像素坐标——只要最终渲染位置或尺寸含小数，就糊。
为什么 translate3d(0, 0, 0) 在 iOS Safari 上反而更糊
它强制创建独立合成层，直接关闭了 WebKit 的亚像素抗锯齿（-webkit-font-smoothing: subpixel-antialiased）生效条件。Safari 对合成层内字体渲染极其敏感，哪怕 rotate(0.1deg) 都会降级为灰度抗锯齿，边缘立刻发虚。
- DevTools Layers 面板里能看到文字元素标着 “Composited”，且 “Paint” 步骤消失 → 已跳过主线程光栅化
-
transform-origin落在奇数宽高容器的中心点（如width: 301px→ 50% =150.5px）时，GPU 采样必然模糊 - 加了
translate3d(0, 0, 0)后，font-smoothing属性基本失效，因为渲染路径已切换
JS 动态设置 transform 值时必须 Math.round()
动画中用 requestAnimationFrame 或 CSS @keyframes 计算位移/角度，原始值几乎全是浮点数。不截断，等于主动喂给 GPU 一堆亚像素坐标。
-
el.style.transform = `translateY(${y}px)`→ 模糊（y是12.345） -
el.style.transform = `translateY(${Math.round(y)}px)`→ 大概率清晰（y变成12） - 旋转同理：
rotate(${Math.round(angle)}deg)，避免rotate(87.3deg)这类值 - 缩放慎用：
scale(1.2)把 16px 字体变成 19.2px，再叠加 rotate，小数误差翻倍
比 will-change 更稳的绕过方案
will-change: transform 在移动端基本无效，还可能让图层数暴涨、内存泄漏。真正可控的是不让文字进 GPU 管线，或让它进去前就对齐。
- 放弃
transform: translate(-50%, -50%)居中，改用position: absolute; top: 50%; left: 50%; margin-top: -Apx; margin-left: -Bpx;（A/B为整数） - 容器设偶数宽高：
width: 400px; height: 60px;+transform-origin: 50% 50%，确保旋转中心落在物理像素中心 - 必须用 transform 时，加
-webkit-font-smoothing: subpixel-antialiased; text-rendering: optimizeSpeed;（仅对未升层或 macOS 有效） - 终极兜底：用
linear-gradient+::before模拟倾斜，彻底避开transform
最常被忽略的一点：模糊是否真实存在，得先看 DevTools Layers 面板有没有 “Composited” 标记。没这个标记，说明根本没走 GPU 渲染，此时加任何硬件加速指令都只是徒增开销。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
