Safari浏览器同级元素动画时旋转文本模糊故障的原因及修复方案

问题原因 #

这是Safari使用的WebKit内核的固有渲染特性导致的：
当.description元素执行过渡动画时，会触发卡片区域的重绘逻辑，WebKit在处理重叠元素动画+带有旋转变换的文本元素时，会临时关闭亚像素抗锯齿，同时图层合成阶段的坐标计算精度不足，最终就导致已经做了旋转的label文本出现抖动、模糊的问题。Chrome的Blink内核在图层合成的精度和抗锯齿策略上做了额外优化，所以不会出现该问题。

修复方案 #

你可以任选以下任意一种方案修复：

• 给label元素强制开启GPU合成层，避免被其他元素的重绘逻辑影响，修改transform属性即可：

.card .label {
  /* 原有属性保留，新增translateZ(0)触发GPU加速 */
  transform: rotate(-45deg) translateZ(0);
}

如果效果仍不明显，可以补充添加will-change: transform;属性，提前告知浏览器该元素会有变换操作，预留渲染资源。

• 强制开启文本抗锯齿，避免动画期间抗锯齿失效导致的模糊，给label添加如下属性：

.card .label {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

• 给整个card元素强制触发GPU合成，让卡片内所有元素的渲染逻辑独立：

.card {
  transform: translateZ(0);
}

• 如果上述方案都无法解决，可以尝试给label添加1px透明边框，或者把label的背景透明度设置为0.99，强制WebKit维持稳定的渲染策略：

.card .label {
  border: 1px solid transparent;
  /* 或者 background: rgba(255, 51, 17, 0.99); */
}

内容的提问来源于stack exchange，提问作者vch