如何防止CSS过渡期间Webkit文本呈现更改

我正在使用CSS转换在CSS转换状态之间进行转换（基本上是在转换元素的比例）。我注意到当元素过渡时，页面上的其余文本（在Webkit中）倾向于稍微改变其呈现方式，直到过渡完成为止。

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

我还注意到在我的标头上没有发生这种情况，标头上具有-webkit-font-smoothing: antialiased属性/值对。因此，我想知道，是否有任何方法可以使文本保持其默认外观（字体平滑的“自动”值）并且在过渡期间不更改渲染。

我尝试过显式设置文本以使用“自动”值，但这没有任何作用。我还应注意，将字体平滑设置为“无”也可以防止过渡期间渲染闪烁。

任何帮助表示赞赏。

编辑1

我应该注意，我使用的是OSX。在Parallels上的Chrome浏览器中测试时，我没有看到两个不同的段落的行为有所不同，因此这可能是Mac独有的问题。

我想我找到了一个解决方案：

-webkit-transform: translateZ(0px);

在父元素上强制硬件加速似乎可以解决问题...

编辑 正如评论所述，此hack会禁用字体平滑功能，并且可能会根据您的字体，浏览器和操作系统降低文本渲染效果！

2020年8月更新

您不再需要通过媒体查询来定位Safari以启用亚像素字体平滑。默认值很好。

但是，尽管默认情况下它使用亚像素字体平滑，但是对于希望寻找一致的文本呈现的人来说，Chrome字体平滑的美中不足之处。

1. 这是Chrome在深色背景上呈现的浅色文字
2. 这是Chrome在浅色背景上呈现深色文字的效果

在上面的字母e中查看整体的大小。与浅色背景上的深色文本（具有相同的css字体样式）相比，深色背景上的浅色文本具有明显可观的重量。

对于尊重用户的暗/亮主题设置的网站，一种解决方案是使用仅限于暗模式的媒体查询来定位Chrome，然后将其切换为非亚像素平滑处理，如下所示：

@media screen
and (-webkit-min-device-pixel-ratio: 0)
and (min-resolution: 0.001dpcm)
and (prefers-color-scheme: dark) {
  body {
    -webkit-font-smoothing: antialiased;
  }
}

结果 ：

无论是在暗处还是在暗处，都具有更一致的文本粗细。

查看之前和之后的并排比较：

-

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自动“放弃” ”使用亚像素抗锯齿字体平滑，而是切换为仅抗锯齿文本，它看起来要轻薄得多，尤其是在Safari上。

其他响应集中在通过简单地设置或强制对较薄的抗锯齿文本进行字体平滑来保持恒定的呈现。在我看来，使用translateZ或隐藏的背面会大大降低文本渲染的质量，如果您只希望使文本保持一致并且可以使用较薄的文本，则最好的解决方案是使用-webkit-font-smoothing: antialiased。但是，显式设置-webkit-font-smoothing: subpixel-antialiased实际上确实会产生一些效果-文本仍然会略有变化，并且在GPU上渲染的过渡过程中，文本明显变薄，但没有设置时变薄。因此，这看起来至少部分阻止了改用平直的抗锯齿文字。

我已经注意到，几乎每当我因过渡而遇到图形问题（闪烁/卡顿/抖动/等）时，都可以使用-webkit-backface-visibility：hidden;。在起作用的元素上倾向于解决问题。

为了防止由于硬件加速而导致文本呈现更改，您可以：

1. 将所有文本设置为-webkit-font-smoothing：抗锯齿。这意味着文本较细且没有亚像素抗锯齿。

2. 如果要对受硬件加速影响的文本进行亚像素抗锯齿（字体平滑的默认类型），则将该文本放入输入中（无边框和禁用）将使该亚像素抗锯齿（至少在Mac OS X上的Chrome上）。我尚未在其他平台上对此进行过测试，但是如果亚像素抗锯齿非常重要，则至少可以使用此技巧。

如果您在Mac上使用Firefox，则需要使用以下CSS来解决此问题。

-moz-osx-font-smoothing: grayscale;

Firefox和Opera中的Webfont平滑和抗锯齿功能可提供更多信息

这对我有用。希望能帮助到你。在其他stackoverflow帖子中找到。

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

为防止渲染更改，您需要设置font-smoothing: antialiased（或none）。

浏览器禁用亚像素字体渲染可能是硬件加速的副作用。当您要渲染的背景不断变化时，无法在单独的图层上渲染文本，因为必须对照所有背景图层检查每一帧。这可能会严重降低性能。

苹果通常会在自己 的网站上禁用亚像素字体平滑功能。

除了上述解决方案（-webkit-transform: translateZ(0px)在元素上和-webkit-font-smoothing: antialiased在页面上）以外，某些元素可能仍然表现不佳。对我来说，它是输入元素中的占位符文本：为此，请使用position:relative

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

我注意到当元素过渡时，页面上的其余文本（在Webkit中）倾向于稍微改变其呈现方式，直到过渡完成为止。

上面的解决方案似乎都不起作用。但是，设置（类似的东西）

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

在具有动画效果的元素上起作用。

通过将动画元素带到GPU层，可以将其从页面渲染的正常流程中移除（例如，像z-index这样的东西也将不再起作用）。副作用是，动画和页面的其余部分不再相互影响。

如果影响字体渲染，则仅对动画元素起作用。我没有看到Chrome的区别。