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

Question

我有一个问题，当应用 CSS 变换的 2D 比例时，文本会像素化。 (我只在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 元素都来 self 的实际站点。)

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

而且，这是一个实际存在问题的网站。 (将鼠标悬停在任何 block 上，然后展开时您可以看到像素化字体)

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 在过渡过程中变成了一个合成层，文本变得模糊，一旦过渡完成，它就不再合成，文本变得清晰(请参阅这个修改后的 fiddle ，它更容易发现边界:http://jsfiddle.net/kF2Q5/)。

在您的第二个 jsfiddle 示例中，即使在转换完成后文本仍然模糊，因为它仍然是一个复合层(大概在不均匀的坐标上)，这是由这些大量嵌套和底层转换(位于复合层之上的元素)引起的层，也成为复合层)。请参阅此修改后的 fiddle :http://jsfiddle.net/PqPSU/使用以下命令禁用所有转换:

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

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

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