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

How to prevent Webkit text rendering change during CSS transition

提问by RussellUresti

I'm using CSS transitions to transition between CSS transformed states (basically transitioning the scale of an element). I notice that when the element is transitioning, the rest of the text on the page (in Webkit) tends to slightly alter its rendering until the transition is done.

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

Fiddle: http://jsfiddle.net/russelluresti/UeNFK/

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

I also noticed that this does not occur on my headers, which have the -webkit-font-smoothing: antialiasedproperty/value pair on them. So, I'm wondering, is there any way to have the text maintain its default look (the "auto" value for font-smoothing) and not alter rendering during a transition.

我还注意到这不会发生在我的标头上，标头上有-webkit-font-smoothing: antialiased属性/值对。所以，我想知道，有什么方法可以让文本保持其默认外观（字体平滑的“自动”值）而不是在过渡期间改变渲染。

I've tried explicitly setting the text to use the "auto" value, but that doesn't do anything. I should also note that setting font-smoothing to "none" also prevents the rendering blink during transition.

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

Any help is appreciated.

任何帮助表示赞赏。

Edit 1

编辑 1

I should note that I am on OS X. While looking at my test in Chrome on Parallels, I did not see the two different paragraphs behaving differently, so this may be an issue exclusive to Macs.

我应该注意到我在 OS X 上。在 Parallels 上查看我在 Chrome 中的测试时，我没有看到两个不同的段落表现不同，所以这可能是 Mac 独有的问题。

回答by Armel Larcier

I think I found A solution:

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

-webkit-transform: translateZ(0px);

Forcing hardware accelerationon the parent element seems to solve the problem...

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

EDITAs commented, this hack disables font-smoothing and can degrade text rendering depending on your fonts, browser and OS!

编辑正如评论的那样，这个 hack 会禁用字体平滑，并且会根据您的字体、浏览器和操作系统降低文本渲染！

回答by atomless

UPDATE May 2018

2018 年 5 月更新

-webkit-font-smoothing: subpixel-antialiasednow has no effect in Chrome but in Safari it still improves things a great deal BUT ONLY ON RETINA. Without it in Safari on retina screens text is thin and insipid, whereas with it, text has the proper weight. But if you use this on non retina displays in Safari, (especially at light weight values) text is a disaster. Strongly recommend using a media-query :

-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; } }

@media screen and (-webkit-min-device-pixel-ratio: 2) { body { -webkit-font-smoothing: subpixel-antialiased; } }

---

---

Explicitly setting -webkit-font-smoothing: subpixel-antialiasedis the best current solution if you wish to at least partially avoid the thinner antialiased text.

-webkit-font-smoothing: subpixel-antialiased如果您希望至少部分避免使用较薄的抗锯齿文本，则显式设置是当前最好的解决方案。

--tl;dr--

--tl;博士--

With both Safari and Chrome where the default font rendering uses subpixel-antialiasing, any CSS that forces GPU based rendering, like the suggestions above to use a transform using translateZ or even just a scale transition, will cause Safari and Chrome to automatically "give up" on subpixel-antialiased font smoothing and instead switch to just antialiased text, which looks a lot lighter and thinner, especially on Safari.

在 Safari 和 Chrome 中，默认字体渲染使用子像素抗锯齿，任何强制基于 GPU 的渲染的 CSS，如上面使用 translateZ 使用变换甚至只是缩放转换的建议，都会导致 Safari 和 Chrome 自动“放弃” " 在子像素抗锯齿字体平滑上，而是切换到抗锯齿文本，它看起来更轻更薄，尤其是在 Safari 上。

Other responses have focused on maintaining a constant rendering by simply setting or forcing font-smoothing to the thinner antiailiased text. To my eye using translateZ or backface hidden significantly degrades the quality of the text rendering and the best solution if you want the text to just stay consistent and you're OK with the thinner text is just to use -webkit-font-smoothing: antialiased. However, explicitly setting -webkit-font-smoothing: subpixel-antialiaseddoes actually have some effect - the text does still change slightly and is just about visibly thinner during transitions rendered on the GPU but not as thin as it goes without this setting. So it looks like this at least partially prevents the switch to straight antiailiased text.

其他响应集中在通过简单地设置或强制字体平滑到更薄的抗锯齿文本来保持恒定渲染。在我看来，使用 translateZ 或 backface hidden 会显着降低文本渲染的质量，如果您希望文本保持一致并且您可以使用更薄的文本，那么最好的解决方案就是使用-webkit-font-smoothing: antialiased. 然而，显式设置-webkit-font-smoothing: subpixel-antialiased确实有一些效果——文本仍然会略有变化，并且在 GPU 上渲染的过渡期间明显变薄，但不像没有这个设置时那么细。所以看起来这至少部分地阻止了直接抗锯齿文本的切换。

回答by Jordan Borth

I've noticed that pretty much every time I'm having graphics issues (flickering/stuttering/choppiness/etc) due to a transition, using -webkit-backface-visibility: hidden; on the elements that are acting up tends to solve the problem.

我注意到几乎每次由于过渡而出现图形问题（闪烁/口吃/断断续续等）时，使用 -webkit-backface-visibility: hidden; 在起作用的元素上倾向于解决问题。

回答by Joran Greef

To prevent text rendering changes due to hardware-acceleration, you can either:

为了防止由于硬件加速引起的文本渲染更改，您可以：

1. Set all text to -webkit-font-smoothing: antialiased. This means text is thinner and not sub-pixel antialiased.

2. If you want text which is being affected by hardware-acceleration to be sub-pixel antialiased (the default kind of font smoothing), then putting that text inside an input, without borders and disabled, will keep that sub-pixel antialiased (at least on Chrome on Mac OS X). I have not tested this on other platforms, but if sub-pixel antialiasing is important, you can at least use this trick.

1. 将所有文本设置为 -webkit-font-smoothing: antialiased。这意味着文本更薄，而不是亚像素抗锯齿。

2. 如果您希望受硬件加速影响的文本进行亚像素抗锯齿（默认的字体平滑类型），然后将该文本放入输入中，无边框并禁用，将保持该亚像素抗锯齿（至少在 Mac OS X 上的 Chrome 上）。我没有在其他平台上测试过这个，但如果亚像素抗锯齿很重要，你至少可以使用这个技巧。

回答by eleclair

If you're using Firefox on a Mac you'll want to use the following css to fix the issue.

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

-moz-osx-font-smoothing: grayscale;

More on this at Webfont Smoothing and Antialiasing in Firefox and Opera

有关更多信息，请参阅 Firefox 和 Opera 中的 Webfont 平滑和抗锯齿

回答by Daniel Almeida

This is what worked for me. Hope it helps. Found in other stackoverflow post.

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

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

回答by Henrik

To prevent the rendering change you need to set font-smoothing: antialiased(or none).

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

The browser disabling subpixel font rendering is likely a side-effect of hardware acceleration. When the background you are rendering against is constantly shifting, the text cannot be rendered on a separate layer, as each frame must be checked against all background layers. This could severely degrade performance.

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

Apple often disable subpixel font-smoothing on theirownsites.

Apple 经常在自己的网站上禁用子像素字体平滑。

回答by WraithKenny

In addition to the above solutions (-webkit-transform: translateZ(0px)on the element, and -webkit-font-smoothing: antialiasedon the page) some elements may still behave badly. For me it was placeholder text in an input element: For this, use position:relative

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

回答by commonpike

I had the same problem. Read it carefully:

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

I notice that when the element is transitioning, the rest of the text on the page(in Webkit) tends to slightly alter its rendering until the transition is done.

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

none of the solutions above seemed to work. However, setting (things like)

上述解决方案似乎都不起作用。但是，设置（例如）

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

on the element that has the animationdid work.

在具有动画的元素上确实有效。

By taking the animated element to the GPU layer you take it out of the normal flow of the page rendering (things like z-index will not work anymore too, for example). As a side effect, the animation and the rest of the page wont influence eachother anymore.

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

If it effects your font rendering, it only does so for the animated element, ofcourse. I don't see the difference in my Chrome.

如果它影响您的字体渲染，它当然只对动画元素起作用。我在 Chrome 中看不出有什么不同。