如何防止CSS过渡期间的Webkit文本渲染变化(How to prevent Webkit tex

我使用CSS转换CSS转化状态之间转变（基本上过渡元素的标度）。我注意到，当元素转换，页面（WebKit中）在文本的其余部分趋于稍微改变它的渲染，直到过渡完成。

小提琴： http://jsfiddle.net/russelluresti/UeNFK/

我还注意到，这并不在我的头，这有发生-webkit-font-smoothing: antialiased对他们的属性/值对。所以，我想知道，有没有什么办法有文本保持其默认外观（对于字体平滑“自动”值），而不是改变的过渡期间呈现。

我试着明确设置使用“自动”值的文本，但是，这并不做任何事情。我还应该注意到，设置字体平滑为“无”，也防止过渡期间呈现闪烁。

任何帮助表示赞赏。

编辑1

我要指出，我在OS X虽然在Parallels的看着我在Chrome测试中，我没有看到两个不同的段落表现不同，所以这可能是专用于Mac电脑的问题。

Answer 1:

我想我找到了解决办法：

-webkit-transform: translateZ(0px);

父元素强制硬件加速似乎解决了问题...

编辑视为注释，该黑客禁用字体平滑，可以根据您的字体，浏览器和操作系统降级文本渲染！

Answer 2:

UPDATE 2018年5月

-webkit-font-smoothing: subpixel-antialiased现在已经在Chrome没有影响，但在Safari仍然提高的东西很大但仅限于视网膜。没有它在Safari上的视网膜屏幕的文字是细而平淡，而有了它，文本具有正确的重量。但是，如果你使用上的Safari非Retina显示屏，（特别是轻权重值）文本是一个灾难。强烈建议您使用媒体查询：

@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的渲染，像上述建议使用变换使用translateZ，甚至只是一个规模化，会导致Safari和Chrome浏览器会自动“放弃任何CSS “在子像素抗锯齿字体平滑，而是切换到刚抗锯齿文本，它看起来很多更轻更薄，尤其是在Safari浏览器。

其他的回答都集中在通过简单的设置或迫使字体平滑较薄antiailiased文本保持恒定的渲染。要使用translateZ或背面隐藏显著降低了文本渲染的质量和最佳的解决方案，如果你想要的文字，只是保持一致，你是用较薄的文本确定我的眼睛只是使用-webkit-font-smoothing: antialiased 。然而，明确设置-webkit-font-smoothing: subpixel-antialiased也确实有一定的效果-文本确实还稍微改变，并呈现在GPU上的转变过程中只是明显变薄，但没有细如不用此设置。所以它看起来像这样至少部分地防止开关直antiailiased文本。

Answer 3:

我注意到，每一次几乎我遇到图形问题（闪烁/口吃/抖动现象的/ etc），由于过渡，使用-webkit-背面能见度：隐藏; 对那些演戏的元素往往会解决这个问题。

Answer 4:

为了防止由于硬件加速，您可以文本渲染的变化：

将所有文字-webkit-字体平滑：抗锯齿。这意味着文本是更薄，而不是子像素抗锯齿。
如果你想这是受着硬件加速是子像素抗锯齿（默认的一种字体平滑的）文本，然后把一个里面输入文本，无国界和残疾人，将保持反锯齿该子像素（至少在Chrome上的Mac OS X）。我没有在其他平台上进行测试，但如果子像素抗锯齿处理是很重要的，你至少可以用这一招。

Answer 5:

如果你在Mac上使用Firefox浏览器，你需要使用下面的CSS来解决这个问题。

-moz-osx-font-smoothing: grayscale;

更多关于这在web字体平滑和反锯齿在Firefox和Opera

Answer 6:

这是对我工作。希望能帮助到你。发现在其它计算器职位。

-webkit-font-smoothing:antialiased;
-webkit-backface-visibility:hidden;

Answer 7:

为了防止您需要设置呈现更改font-smoothing: antialiased （或none ）。

浏览器禁用子像素字体渲染可能是硬件加速的副作用。当要渲染的映衬下是不断变化的，文本不能在一个单独的层呈现，因为每个帧必须对所有的背景层进行检查。这可能会严重降低性能。

苹果经常禁用子像素字体平滑了自己的网站。

Answer 8:

除了上述解决方案（ -webkit-transform: translateZ(0px)的元件上，并且-webkit-font-smoothing: antialiased在网页）一些元件时可能仍然表现不好。对我来说，在输入元素的占位符文本：对于这一点，使用position:relative

Answer 9:

我有同样的问题。请仔细阅读：

我注意到，当元素转换，页面（WebKit中） 在文本的其余部分趋于稍微改变它的渲染，直到过渡完成。

上面没有任何的解决方案似乎工作。但是，设置（喜欢的东西）

#myanimation { -webkit-transform: translateZ(0px); }

有动画的元素上做的工作。

通过采取动画元素，你把它拿出来的页面渲染的正常流动的GPU层（之类的东西的z-index将不再工作太，例如）。作为一个副作用，动画和页面的其余部分不会影响海誓山盟了。

如果你的效果字体渲染，它只是这样做的动画元素着，当然。我看不到我的Chrome的差异。

文章来源: How to prevent Webkit text rendering change during CSS transition