我使用CSS过渡来在CSS转换状态之间转换（基本上转换元素的比例）。我注意到，当元素转换时，页面上的其余文本（在Webkit中）倾向于稍微改变其呈现，直到转换完成。
小提琴：http://jsfiddle.net/russelluresti/UeNFK/
我还注意到我的标题上没有这种情况，标题上有-webkit-font-smoothing: antialiased属性/值对。所以，我想知道，有没有办法让文本保持默认外观（＆＃34;自动＆＃34;字体平滑的值），而不是在转换过程中改变渲染。
我已尝试明确设置文字以使用＆＃34; auto＆＃34;价值，但这并没有做任何事情。我还应该注意，将字体平滑设置为＆＃34; none＆＃34;还可以防止渲染过程中呈现闪烁。
感谢任何帮助。
修改1
我应该注意到我在OS X上。在浏览Parallels的Chrome测试时，我没有看到两个不同的段落表现不同，所以这可能是Mac独有的问题。
答案 0 :(得分：80)
我想我找到了一个解决方案：
-webkit-transform: translateZ(0px);
强制硬件加速似乎可以解决问题......
修改 正如评论的那样，这个hack会禁用字体平滑，并且会根据您的字体，浏览器和操作系统降低文本呈现效果！
答案 1 :(得分：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;博士 -
对于默认字体渲染使用亚像素抗锯齿的Safari和Chrome，任何强制基于GPU渲染的CSS，如上面建议使用translateZ或甚至只是缩放转换，都会导致Safari和Chrome自动生成＆＃34;放弃＆＃34;在亚像素抗锯齿字体平滑上，而不是切换到抗锯齿文本，看起来更轻，更薄，特别是在Safari上。
其他响应的重点是通过简单地设置或强制字体平滑到较薄的反定位文本来维持恒定的渲染。对于我来说，使用translateZ或背面隐藏会显着降低文本呈现的质量，如果您希望文本保持一致，并且使用更薄的文本就可以使用-webkit-font-smoothing: antialiased，那么这是最佳解决方案。但是，显式设置-webkit-font-smoothing: subpixel-antialiased确实会产生一些影响 - 文本仍会稍微改变，并且在GPU上渲染的过渡期间显然更薄，但不像没有此设置那样薄。所以看起来这至少部分地阻止了切换到直接防反病毒文本。
答案 2 :(得分：19)
我注意到，每次因为过渡而出现图形问题（闪烁/口吃/破碎/等）时，使用-webkit-backface-visibility：hidden;正在起作用的元素倾向于解决问题。
答案 3 :(得分：8)
要防止因硬件加速而导致的文本呈现更改，您可以：
将所有文本设置为-webkit-font-smoothing：antialiased。这意味着文本更薄，而不是亚像素抗锯齿。
如果您希望受硬件加速影响的文本是亚像素抗锯齿（默认的字体平滑类型），那么将该文本放在输入中，没有边框并禁用，将保留该子文本像素抗锯齿（至少在Mac OS X上的Chrome上）。我没有在其他平台上测试过这个，但如果子像素抗锯齿很重要，你至少可以使用这个技巧。
答案 4 :(得分：5)
如果你在Mac上使用Firefox，你会想要使用以下css来解决问题。
-moz-osx-font-smoothing: grayscale;
答案 5 :(得分：3)
这对我有用。希望能帮助到你。在其他stackoverflow帖子中找到。
-webkit-font-smoothing:antialiased;
-webkit-backface-visibility:hidden;
答案 6 :(得分：1)
要防止渲染更改，您需要设置font-smoothing: antialiased（或none）。
禁用子像素字体渲染的浏览器可能是硬件加速的副作用。当您渲染的背景不断移动时，文本无法在单独的图层上渲染，因为必须针对所有背景图层检查每个帧。这可能会严重降低性能。
答案 7 :(得分：1)
除了上述解决方案（元素上的-webkit-transform: translateZ(0px)和页面上的-webkit-font-smoothing: antialiased）之外，某些元素仍可能表现不佳。对我来说，它是输入元素中的占位符文本：为此，请使用position:relative
答案 8 :(得分：-1)
我遇到了同样的问题。仔细阅读：
我注意到当元素转换时，文本的其余部分 在页面（在Webkit中）倾向于略微改变其渲染，直到 过渡完成了。
上述解决方案似乎都没有效果。但是，设置（类似的东西）
#myanimation { -webkit-transform: translateZ(0px); }
确实有效。
通过将动画元素带到GPU图层，您可以将其从正常的页面渲染流中取出（例如，z-index之类的东西也不再起作用）。作为副作用，动画和页面的其余部分不再相互影响。
如果它影响你的字体渲染，它只对动画元素，当然。我认为我的Chrome没有区别。