Css – How to prevent Webkit text rendering change during CSS transition

csscss-transformscss-transitionswebkit

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.

Best Answer

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!

Related Topic