我有一个问题，当应用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上修复它。
问题似乎与此类似：http://code.google.com/p/chromium/issues/detail?id=119470
因此，真正引发问题的是，当元素在不均匀的坐标上被渲染为共平面层时。如果在chrome://flags中启用Composited render layer borders选项，您可以看到在第一个jsfiddle示例中，div在转换过程中变成了合成层，文本变得模糊，转换完成后不再合成，文本变得清晰（请参阅此修改后的fiddle，更容易发现边界：http://jsfiddle.net/kF2Q5/)。
在您的第二个jsfiddle示例中，即使在转换完成后，文本也会保持模糊，因为它仍然是一个合成层（大概在不均匀的坐标上），这是由这些嵌套和底层转换（位于合成层上方的元素也会变为合成层）引起的。看看这个修改过的小提琴：http://jsfiddle.net/PqPSU/所有转换都被禁用，使用：
* {
-webkit-transform: translateX(0) !important;
}
因此，只剩下悬停元素上的变换。如果启用了Composited render layer borders选项，您应该会看到瓷砖周围的所有红/棕色边界，表示复合层应该消失。你应该看到，一旦转换完成，文本就会变得清晰，就像你的第一个例子一样。
不幸的是，我没有解决根本问题的方法，即合成层的模糊渲染，我想这是无法解决的问题，但只能在渲染引擎和/或显卡驱动程序中解决，具体取决于问题的确切原因。
您可以调整文本呈现css属性。https://developer.mozilla.org/fr/docs/CSS/text-rendering
但你的例子对我来说很好，请在另一台电脑上查看。
您应该更新浏览器或图形卡驱动程序。