Rus*_*sti 80 css webkit css3 css-transitions css-transforms
我正在使用CSS转换来在CSS转换状态之间转换(基本上转换元素的比例).我注意到,当元素转换时,页面上的其余文本(在Webkit中)倾向于稍微改变其呈现,直到转换完成.
小提琴:http://jsfiddle.net/russelluresti/UeNFK/
我还注意到,我的标题上没有这种情况,标题上有-webkit-font-smoothing: antialiased属性/值对.所以,我想知道,有没有办法让文本保持默认外观(字体平滑的"自动"值),而不是在转换过程中改变渲染.
我已经尝试明确设置文本使用"自动"值,但这没有做任何事情.我还应该注意,将字体平滑设置为"无"也会阻止渲染在转换期间闪烁.
任何帮助表示赞赏.
编辑1
我应该注意到我使用的是OS X.在浏览Parallels的Chrome测试时,我没有看到两个不同的段落表现不同,所以这可能是Macs独有的问题.
Arm*_*ier 82
我想我找到了一个解决方案:
-webkit-transform: translateZ(0px);
强制父元素上的硬件加速似乎解决了这个问题......
编辑 评论,这个黑客禁用字体平滑,并可以降低文本渲染,具体取决于您的字体,浏览器和操作系统!
ato*_*ess 45
更新2018年5月
-webkit-font-smoothing: subpixel-antialiased现在对Chrome没有任何影响,但在Safari中,它仍然可以改善很多东西,但仅限于RETINA.没有它在视网膜屏幕上的Safari中,文字很薄而且平淡,而有了它,文本具有适当的重量.但如果你在Safari的非视网膜显示器上使用它(特别是在重量轻的情况下),文本就是一场灾难.强烈建议使用媒体查询:
@media screen and (-webkit-min-device-pixel-ratio: 2) {
body {
-webkit-font-smoothing: subpixel-antialiased;
}
}
-webkit-font-smoothing: subpixel-antialiased如果您希望至少部分避免使用较薄的抗锯齿文本,则明确设置是当前最佳解决方案.
--tl; dr--
对于默认字体渲染使用亚像素抗锯齿的Safari和Chrome,任何强制基于GPU渲染的CSS,如上面使用translateZ进行转换甚至只是缩放转换的建议,都会导致Safari和Chrome自动"放弃" "在亚像素抗锯齿字体平滑上,而不是切换到抗锯齿文本,它看起来更轻,更薄,特别是在Safari上.
其他响应的重点是通过简单地设置或强制字体平滑到较薄的反定位文本来维持恒定的渲染.对于我来说,使用translateZ或背面隐藏会显着降低文本渲染的质量,并且如果您希望文本保持一致并且您可以使用更薄的文本就可以使用最佳解决方案-webkit-font-smoothing: antialiased.然而,显式设置-webkit-font-smoothing: subpixel-antialiased实际上确实有一些效果 - 文本仍然略有变化,并且在GPU上呈现的过渡期间显然更薄,但不像没有此设置那样薄.所以看起来这至少部分地阻止了切换到直接的反定位文本.
小智 19
我注意到,每次因为转换而出现图形问题(闪烁/口吃/紊乱/等)时,使用-webkit-backface-visibility:hidden; 正在起作用的元素倾向于解决问题.
要防止由于硬件加速而导致的文本呈现更改,您可以:
将所有文本设置为-webkit-font-smoothing:antialiased.这意味着文本更薄,而不是亚像素抗锯齿.
如果您希望受硬件加速影响的文本是子像素抗锯齿(默认的字体平滑类型),那么将该文本放入输入,无边框和禁用,将保持该子像素抗锯齿(至少在Mac OS X上的Chrome上).我没有在其他平台上测试过这个,但如果子像素抗锯齿很重要,你至少可以使用这个技巧.
小智 5
如果您在Mac上使用Firefox,则需要使用以下css来解决问题.
-moz-osx-font-smoothing: grayscale;
有关这方面的更多信息,请参阅Firefox和Opera中的Webfont Smoothing和Antialiasing