如何在CSS转换期间防止Webkit文本呈现更改 [英] How to prevent Webkit text rendering change during CSS transition

问题描述

我使用CSS转换在CSS转换状态之间转换（基本上转换元素的比例）。我注意到，当元素转换时，页面上的其余文本（在Webkit中）往往稍微改变它的渲染，直到转换完成。

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

我也注意到，这不会发生在我的头，其中有 -webkit-字体平滑：抗锯齿属性/值对。所以，我想知道，有什么办法让文本保持其默认外观（字体平滑的自动值），并且不会改变渲染过渡期间。

我已经尝试明确设置文本使用自动值，但这不做任何事情。我还应该注意，将字体平滑设置为无也可以防止在转换过程中呈现闪烁。

任何帮助是值得赞赏的。

编辑1

我应该注意，我在OS X上。我没有看到这两个不同的段落行为不同，所以这可能是一个问题Macs独家。

解决方案

解决方案：

  -webkit-transform：translateZ（0px）; 
  

强制硬件加速似乎解决了问题。

编辑
如所说，这个黑客会禁用字体平滑，并可以降低文本呈现取决于您的字体，浏览器和操作系统！

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.

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

I also noticed that this does not occur on my headers, which have the -webkit-font-smoothing: antialiased property/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.

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

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.

解决方案

I think I found A solution:

-webkit-transform: translateZ(0px);

Forcing hardware acceleration on the parent element seems to solve the problem...

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

这篇关于如何在CSS转换期间防止Webkit文本呈现更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！