safari 对亚像素渲染更严格，非整数像素位移（如 translatex(50%) 在 199px 容器中得 99.5px）会强制插值光栅化致边缘发虚；blur() 溢出需父容器 overflow: hidden 截断；backdrop-filter 需 content、尺寸及无 transform/will-change；高 dpr 下需 text-rendering、-webkit-font-smoothing 和 backface-visibility 三者协同抗锯齿。
filter: blur() 触发亚像素渲染，Safari 尤其敏感
不是 Safari “渲染差”，而是它对 sub-pixel 偏移更严格：只要 transform 或 filter 计算出非整数像素位移（比如 translateX(50%) 在 199px 宽容器里得 99.5px），Safari 就会强制插值光栅化，文字/边缘立刻发虚。这不是 bug，是渲染管线的确定性行为。
常见诱因包括：
-
transform: scale(1.1)、scale(0.83)这类无理数缩放，放大后小数点后位数爆炸 -
blur(3.5px)或从 JS 动态拼接时漏单位（blur(3)被忽略，但开发者常误以为“没生效”而非“无效值”） - 父容器宽度含小数（如
width: calc(100vw - 1px)），导致子元素百分比计算必然落非整数像素
blur() 溢出像素未被裁剪，直接污染边缘
filter: blur(4px) 不改变盒模型尺寸，但会在绘制阶段向外扩出约 8px 像素区域——这些溢出像素属于独立 paint layer，overflow: hidden 对自身无效，必须加在**直接父容器**上才起作用。
但要注意：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 若父容器本身有
overflow: auto或需要滚动，加overflow: hidden会破坏交互 - 此时改用
transform: scale(1.04)+margin: -2px补偿更稳妥，且兼容position: absolute子元素 - Safari 中偶发重绘异常，可叠加
transform: translateZ(0)强制硬件加速缓解
backdrop-filter 在伪元素上失效，常被误判为锯齿
想用 ::before 实现毛玻璃边缘，却看到“发灰”“不透明”或模糊范围固定？大概率是混用了 filter: blur()（糊自己）和 backdrop-filter: blur()（糊背后）。后者才是正确选择，但 Safari 要求：
-
::before必须有content: ""和显式尺寸（inset: -10px≥ 模糊半径） - 父容器不能有
overflow: hidden或clip-path，否则 backdrop 采样被硬截断 - 避免父级存在
transform: translateZ(0)或will-change: transform，它们会切断 backdrop 渲染链
高 DPR 屏幕下，抗锯齿策略被系统级禁用
Mac macOS Mojave 起默认禁用 sub-pixel antialiasing，外接非 Retina 显示器时，background-clip: text 渐变文字边缘必然阶梯状。单靠 CSS 无法绕过系统限制，必须组合三要素：
-
text-rendering: optimizeLegibility（启用字形微调） -
-webkit-font-smoothing: antialiased（强制灰度抗锯齿） -
backface-visibility: hidden（触发 GPU 合成层，稳住亚像素对齐）
少任何一个，Retina 屏上的锯齿或色带伪影都可能重现——这和代码写法无关，是渲染管线层级的约束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
