子元素文字因父容器transform变糊，根本原因是父级触发GPU合成层，使子元素文字被迫放弃亚像素渲染、降级为灰度抗锯齿；Chrome Layers面板标红即确认问题，隔离需用isolation: isolate切断继承链。
为什么子元素文字一加 transform 就糊
根本不是子元素自己写了 transform，而是父容器用了 transform（哪怕只是 translateZ(0)），导致整个子树被拖进 GPU 合成层——文字一旦进合成层，就自动放弃亚像素渲染，改用灰度抗锯齿或双线性插值。Chrome Layers 面板里看到子元素区域标红 + “Composited”，就是它了。
常见诱因包括：transform-style: preserve-3d、perspective、opacity、filter、backface-visibility: hidden，这些都会隐式提升图层，连带把子元素文字一起“污染”。
- 别在父容器上乱加
will-change: transform—— 它不解决模糊，反而提前创建合成层，让问题更早出现 -
transform: translateZ(0)单独用对子元素无效，iOS Safari 尤其明显 - 子元素写
-webkit-font-smoothing: subpixel-antialiased没用，因为该属性只对主文档层生效
怎么隔离子元素，不让它被父级 transform 连坐
核心是切断合成层继承链。浏览器默认把有 transform 的父容器设为“合成根”，所有后代都可能被卷入；必须显式告诉它：“这里停，别往下传”。
- 给子元素的**直接父容器**加
isolation: isolate—— 这是最轻量、最兼容的断层方式（支持 Chrome 59+、Firefox 55+、Safari 15.4+） - 如果父容器本身需要 3D 效果，
transform-style: preserve-3d只能加在**最外层容器**（如.scene），文字所在的层级必须完全避开它 - 避免嵌套
transform：父容器rotateY(10deg)+ 子元素translateX(20px)，等于双重插值，糊得更快
JS 动态控制时，如何防止子元素坐标失准
哪怕父容器没动，JS 计算子元素偏移时若用了浮点值，也会触发模糊。关键不是“有没有 transform”，而是 getComputedStyle(el).transform 返回的矩阵第 13/14 位（x/y 偏移）是不是整数。
- 别用
offsetTop或clientY直接驱动：它们返回值常带小数，比如100.33333333333333 - 优先用
getBoundingClientRect()+Math.round()：复制AI写代码const { x, y } = el.getBoundingClientRect(); el.style.transform = `translate(${Math.round(x)}px, ${Math.round(y)}px)` - 动画中每帧都要取整：requestAnimationFrame 里不做
Math.round()，插值过程产生的中间帧照样糊
移动端 Safari 特别难搞怎么办
iOS Safari 对合成层字体渲染极其敏感，且不响应很多桌面端有效的 hack。它要求两个条件同时满足才可能恢复子像素渲染：文字所在层必须是主文档层，且变换角度/缩放值严格为整数。
- 必须加
-webkit-font-smoothing: subpixel-antialiased，但只对没被祖先transform提升的元素有效 -
rotate()必须是整数度数：transform: rotate(${Math.round(angle)}deg)，rotate(5.1deg)就会失效 - 绝对避免
scale()动文字：哪怕scale(1.01)，GPU 重采样也会绕过字体光栅化；改用font-size或line-height过渡
最常被忽略的一点：没在 Layers 面板看到 “Composited”，说明压根没进 GPU 渲染流程，此时加任何 will-change、translateZ(0) 或 isolation 都是白忙——先确认是否真被合成，再动手。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
