iOS Safari ≤15.6 中 rotate() 导致文字模糊是因旧渲染管线对亚像素旋转采用粗暴双线性滤波，非整数角度、非整数 transform-origin 或 translateZ(0) 会加剧模糊，实测有效解法包括用 rotateZ()、SVG、skew 替代及动态控制 will-change。
直接说结论：iOS Safari ≤15.6 中 rotate() 导致文字模糊，不是写法错，是旧渲染管线对亚像素旋转插值粗暴；抖动则多因图层反复创建/销毁，核心解法是避开非整数角度、禁用 translateZ(0)、改用 rotateZ() 或 SVG，并手动控制 will-change 时机。
为什么 rotate(15deg) 在 iOS Safari 里特别糊？
旧版 Safari（尤其是 iOS 15 及更早）把旋转后的文字当位图纹理处理，再用双线性滤波拉伸——它不走主渲染层的亚像素抗锯齿路径，而是直奔 GPU 最简采样。结果就是边缘发虚、毛边明显。这不是 bug，是 Safari 旧 GPU 文本管线的固有妥协。
-
rotate(90deg)、rotate(180deg)通常不糊，因为坐标能严格对齐整数像素 -
rotate(15.2deg)或rotate(45deg)（尤其在奇数宽高容器中）大概率触发模糊 -
transform-origin: 50% 50%在width: 301px容器里算出150.5px，非整数 origin 是常见放大器
哪些“修复技巧”反而让问题更糟？
很多网上流传的“加速 hack”在 iOS Safari 旧版中是负优化：
-
transform: rotate(15deg) translateZ(0)→ 强制创建两个合成层，纹理采样误差翻倍，实测锐度下降约 40% -
will-change: transform静态写在 CSS 里 → 图层长期占着不放，滚动卡顿、内存升高，且不修正像素对齐 -
backface-visibility: hidden加在父容器上 → 完全无效，该属性不继承，必须加在动画元素自身 -
filter: blur(0)或backdrop-filter→ 可能强制降级到 CPU 渲染，模糊+卡顿双杀
真正管用的替代方案（Safari 14–15.6 实测有效）
绕开旋转本身，比硬调参数更可靠：
- 小角度倾斜用
transform: skewX(-2deg) skewY(2deg)，文字仍走主渲染层，无 GPU 插值 - 纯图标类文字（如按钮内“+”、“→”）改用 SVG：
- 必须用 CSS 旋转时，优先写
transform: rotateZ(15deg)而非rotate(15deg)，Safari 对 Z 轴旋转的合成策略略保守，有时能跳过最糙路径 - 容器宽高设为偶数像素 +
transform-origin: 50% 50%→ 确保旋转中心落在物理像素中心
动态控制 will-change 才有意义
will-change 不是开关，是生命周期信号。静态声明等于长期占用资源：
- 动画开始前一帧，JS 设置：
el.style.willChange = 'transform' - 动画最后一帧，在
requestAnimationFrame回调里立刻设为：el.style.willChange = 'auto' - 若角度来自拖拽计算，务必先
Math.round(angle)再拼进transform，避免rotate(37.812deg)这种值 - 别对
:hover这类无明确结束时机的状态用will-change，直接写transform: rotateY(180deg) backface-visibility: hidden更稳
最易被忽略的一点：iOS Safari 的图层策略和桌面版不同，真机测试不可替代。哪怕 DevTools 里看着正常，iPhone 上首次滑动后可能才闪第一下——那才是真实瓶颈所在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
