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选项，则应该会看到图块周围的所有红色/棕色边框，表示合成图层应该消失。你应该看到，一旦转换完成，文本就会变得清晰，就像你的第一个例子一样。

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

Answer 2

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

但是你的例子适用于我，请检查另一台计算机。

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

Chrome中的字体像素问题（HTML5 / CSS3）

2 个答案: