logo标签列表

Chrome浏览器下字体像素化问题（HTML5/CSS3）

csshtmlgoogle-chrometransformcss-transitions
5

我有一个问题，当应用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上修复它。
2个回答
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;
}

所以只有悬停元素上的变换留下了。如果您启用了“合成渲染层边框”选项，则应该看到所有砖块周围的红色/棕色边框，指示合成层已消失。并且您应该看到在过渡完成后文本变得清晰，就像您的第一个示例一样。
不幸的是，我没有解决根本问题的方法，即合成层模糊渲染，我想这是无法在此端解决的问题，但可以在渲染引擎和/或图形卡驱动程序中修复，具体取决于问题的原因。
我知道在不均匀的坐标下会出现模糊，但你指出了在组合图层条件下解决问题的方法。谢谢！现在，我可以追踪图层以修复问题，而不必强制每个元素都translateX(0)。 - Won
0
它在我所有的电脑上看起来都一样，这些电脑都安装了最新版本的Chrome（Win8、Win7、XP、OSX，Chrome版本为27.0.1453.116）。此外，文本呈现并不能解决这个问题（我尝试了所有选项）。 - Won
我上次遇到这个问题是因为显卡驱动程序。这个问题应该来自于反锯齿。 - FLX
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接