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元素都放在我的实际网站上.)

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

而且,这是一个有问题的实际网站.(将鼠标悬停在任何块上,然后在扩展时可以看到像素化字体)

http://jsfiddle.net/GJ7BM

任何人都知道如何解决它？没关系,你可以直接在我的jsfiddle上修复它.

Answer 1

问题似乎与此类似：http://code.google.com/p/chromium/issues/detail ?id=119470

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

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

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

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

不幸的是，我没有解决根本问题的方法，即合成层的模糊渲染，我想这是无法解决的问题，但只能在渲染引擎和/或显卡驱动程序中修复，具体取决于在哪里正是问题所在。