Chrome 中的字体像素化问题 (HTML5/CSS3)

Question

我遇到了一个问题，即在应用 2D 比例的 CSS 变换时文本像素化。 （我只在Chrome中测试过，后面我会做交叉浏览，所以你不需要在不同的浏览器上测试。）

CSS

.versus_block_hover
{
    -webkit-transform: scale(1.2,1.2)!important; 
    -webkit-transition: 50ms 0ms!important; 
    z-index:1100!important;
    border-width:1px;
    border-color:#000;
    border-style:solid;
}

Javascript 代码

$('.versus_block').hover(function() {
   $(this).addClass('versus_block_hover');
   $(this).parent().css('z-index','1100');
}, function() {
   $(this).removeClass('versus_block_hover');
   $(this).parent().css('z-index','0');
});

我知道 Chrome 在 CSS 转换期间使用位图操作来进行 3D 加速。 但是，当我在 jsfiddle 中对其进行测试时，它并没有被像素化。从表面上看，Chrome 似乎在转换完成后重新绘制了一个文本。

查看这个工作示例。将鼠标悬停在一个盒子上。 （我从我的实际站点中放置了所有 CSS 元素。）

http://jsfiddle.net/eCkdE/11/

而且，这是存在问题的实际网站。 （悬停任意块，展开后可以看到像素化字体）

http://jsfiddle.net/GJ7BM

有人知道如何解决它吗？没关系，你可以直接在我的jsfiddle上修复。

Answer 1

问题好像是这样的：http://code.google.com/p/chromium/issues/detail?id=119470

所以真正引发问题的是，当元素在不均匀的坐标上呈现为合成层时。如果您在chrome://flags 中启用Composited render layer borders 选项，您可以看到在您的第一个jsfiddle 示例中，当转换正在进行时，div 变成了一个合成层，文本变得模糊，一旦转换完成，它就不再被合成，并且文本变得清晰（参见这个修改过的小提琴，更容易发现边框：http://jsfiddle.net/kF2Q5/）。

在您的第二个 jsfiddle 示例中，即使在转换完成后，文本仍然保持模糊，因为它仍然是一个合成层（大概在不均匀的坐标上），这是由这些大量嵌套和底层转换（位于合成之上的元素层，也成为复合层）。查看这个修改过的小提琴：http://jsfiddle.net/PqPSU/ 所有转换都被禁用：

* {
    -webkit-transform: translateX(0) !important;
}

所以只剩下悬停元素上的变换。如果您启用了Composited render layer borders 选项，您应该会看到图块周围的所有红色/棕色边框，表明合成图层应该消失了。您应该会看到，一旦转换完成，文本就会变得清晰，就像在您的第一个示例中一样。

不幸的是我没有解决底层问题，即合成图层的模糊渲染，我想这是无法解决的，只能在渲染引擎和/或显卡驱动程序中修复，取决于问题的确切位置。

Answer 2

您可以调整文本渲染 css 属性。 https://developer.mozilla.org/fr/docs/CSS/text-rendering

但是您的示例对我来说很好，请在另一台计算机上检查。

您应该更新浏览器或显卡驱动程序。