在 Chrome 中使用 webkit-transform 旋转时出现不稳定的文本抗锯齿

Question

我正在使用 -webkit-transform: rotate() 旋转一个元素，在 Chrome 14.0.835.2 dev-m 中，它对元素内的文本做了一些非常奇怪的事情。它让我想起了在 Photoshop 中使用“平滑”抗锯齿而不是“清晰”旋转文本时获得的类似效果。

有人知道这里发生了什么吗？它是特定于这个 webkit 或 Chrome 版本的还是我可以做些什么来修复它？ （它也不是对列表元素之间的边界进行抗锯齿处理）

这是 CSS：

div.right-column.post-it
{
  position: relative;
  width: 240px;
  background-color: #fe9;
  padding: 20px;
  -webkit-transform: rotate(.7deg);
  background: #fe9 -webkit-gradient(radial, 20% 10%, 0, 50% 10%, 500, from(rgba(255,250,220,1)), to(rgba(255,238,253,0)));
  box-shadow: 1px 1px 0 #ddccaa, 
            2px 2px 0 #dbcaa8,
            3px 3px 0 #d9c8a6,
            4px 4px 0 #d7c6a4,
            5px 5px 0 #d5c4a2,
            6px 6px 1px #d3c2a0,
            4px 4px 2px rgba(90,70,50,.5),
            8px 8px 3px rgba(90,70,50,.3),
            12px 12px 5px rgba(90,70,50,.1);
}

Answer 1

尝试使用 webkit 触发 CSS 3d 变换模式。这改变了 chrome 的渲染方式

-webkit-transform: rotate(.7deg) translate3d( 0, 0, 0);

---

编辑

还有一个 Webkit only 样式声明 -webkit-font-smoothing 接受值

• none
• subpixel-antialiased
• antialiased

其中subpixel-antialiased 是默认值。

唉，亚像素抗锯齿不是旋转文本的好解决方案。渲染机无法处理。 3d 变换仅切换到 antialiased。但是我们可以尝试直接设置。

请看这里http://maxvoltar.com/archive/-webkit-font-smoothing

Answer 2

字体模糊是由一个奇怪的 webkit 问题引起的，其中涉及 -webkit-backface-visibility。这花了我很长时间才弄清楚，而且我还没有在网络上的其他任何地方看到它。

我现在添加 -webkit-backface-visibility: hidden;到我网站的主体作为 CSS 重置样式。观看它锐化整个网站上的字体，这太棒了。您的转换不是 3d 的，所以无论如何这不会影响任何东西，但是如果您决定在站点的其他地方进行 3d 转换，只需添加 back -webkit-backface-visibility: visible;到特定元素。也应该修复闪烁。