5

我有一个问题，即应用 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上修复它。

4

2 回答 2

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

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

于 2013-06-26T14:59:27.800 回答
0

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

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

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

于 2013-06-26T11:51:06.083 回答