如何在CSS转换期间防止Webkit文本呈现更改
我正在使用CSS转换在CSS转换状态之间转换（基本上转换元素的缩放比例）。 我注意到，当元素正在转换时，页面上的其他文本（在Webkit中）往往略微改变其渲染，直到转换完成。
小提琴： http : //jsfiddle.net/russelluresti/UeNFK/
我也注意到这不会发生在我的头上，它们上面有-webkit-font-smoothing: antialiased属性/值对。 所以，我想知道，是否有任何方法让文本保持其默认外观（字体平滑的“自动”值），而不会改变过渡期间的渲染。
我已经尝试明确地设置文本使用“自动”值，但是这并没有做任何事情。 我还应该注意，将字体平滑设置为“无”也可以防止在转换期间呈现闪烁。
任何帮助表示赞赏。
编辑1
我应该注意到我在OS X上。在Parallels的Chrome上testing我的testing时，我没有看到两个不同的段落有不同的performance，所以这可能是Mac专有的问题。
我想我find了一个解决scheme：
-webkit-transform: translateZ(0px);
强制父元素的硬件加速似乎解决了这个问题…
编辑正如评论，这黑客禁用字体平滑，并可以降低文字呈现取决于你的字体，浏览器和操作系统！
显式设置-webkit-font-smoothing: subpixel-antialiased是当前最好的解决scheme，如果您希望至less部分避免较薄的antialiased文本。
–tl; dr–
在Safari和Chrome中默认字体渲染使用亚像素抗锯齿的情况下，任何强制进行基于GPU渲染的CSS（如上面提到的使用translateZ甚至只是一个缩放转换的转换）都会导致Safari和Chrome自动“放弃“在亚像素antialiased字体平滑，而是切换到只反锯齿的文本，看起来更轻，更薄，特别是在Safari。
其他的反应则集中在通过简单地设置或强制字体平滑到更薄的反锯齿文本来维持恒定的呈现。 在我看来，使用translateZ或背面隐藏会显着降低文本渲染的质量，如果您希望文本保持一致，并且您可以使用较薄的文本，则只需使用-webkit-font-smoothing: antialiased 。 但是，明确设置-webkit-font-smoothing: subpixel-antialiased实际上会产生一些效果 – 文本在GPU上显示的转换过程中仍然略微有点变化，但明显变得更薄，但不会像没有此设置那么细。 所以看起来这至less部分地防止了切换到防滑文本。
更新八月2017
-webkit-font-smoothing: subpixel-antialiased现在在Chrome中没有任何效果，并在Safari中降级文本。 build议避免。
我注意到，几乎每次我有graphics问题（闪烁/口吃/ choppiness /等）由于过渡，使用-webkit-backface-visibility：hidden; 对正在行动的要素往往解决问题。
要防止由于硬件加速引起的文本呈现更改，您可以：
-
将所有文本设置为-webkit-font-smoothing：antialiased。 这意味着文本更薄，而不是亚像素反锯齿。
-
如果您希望受硬件加速影响的文本是亚像素反锯齿（默认字体平滑types），那么将该文本放在input中，无边框和禁用，将保持该子像素反锯齿（至less在Mac OS X上的Chrome上）。 我没有在其他平台上testing过，但如果亚像素抗锯齿很重要，那么至less可以使用这个技巧。
如果您在Mac上使用Firefox，则需要使用以下CSS来解决问题。
-moz-osx-font-smoothing: grayscale;
Webfont在Firefox和Opera中进行平滑和抗锯齿的更多信息
要防止渲染更改，您需要设置font-smoothing: antialiased （或none ）。
浏览器禁用子像素字体渲染可能是硬件加速的一个副作用。 当您渲染的背景不断移动时，文本无法在单独的图层上呈现，因为必须针对所有背景图层检查每个帧。 这可能会严重降低性能。
苹果经常禁用子像素字体平滑在自己 的网站。
除了上面的解决scheme（元素上的-webkit-transform: translateZ(0px)和页面上的-webkit-font-smoothing: antialiased ），某些元素仍可能performance不佳。 对我来说，它是一个input元素中的占位符文本：为此，请使用position:relative
这是为我工作。 希望它有帮助。 发现在其他stackoverflow后。
-webkit-font-smoothing:antialiased; -webkit-backface-visibility:hidden;
我有同样的问题。 仔细阅读：
我注意到，当元素正在转换时， 页面上的其他文本 （在Webkit中）往往略微改变其渲染，直到转换完成。
上述解决scheme似乎都没有工作。 但是，设置（比如）
#myanimation { -webkit-transform: translateZ(0px); }
在有animation的元素上工作。
通过将animation元素带到GPU图层，可以将其从页面渲染的正常stream程中取出（例如z-index之类的东西也不会再起作用）。 作为副作用，animation和页面的其他部分不会再影响到彼此。
如果它影响你的字体渲染，那么对于animation元素来说，这只是当然的。 我没有看到我的Chrome中的差异。
