How to prevent Webkit text from changing text during CSS transition

Question

I use CSS transitions to transition between transformed CSS states (mostly with element zoom). I notice that when an element transitions, the rest of the text on the page (in Webkit) tends to slightly change its display until the transition is completed.

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

I also noticed that this does not happen in my headers, which have a couple of properties / tale> t20>. So, I am wondering if there is a way to save the default text ("auto" value to smooth the fonts), and not change the rendering during the transition.

I tried to explicitly set the text to use the value "auto", but it does nothing. I should also note that setting the font smoothing to "none" also prevents the display from blinking during the transition.

Any help is appreciated.

Change 1

I should note that I am on OS X. When I looked at my test in Chrome on Parallels, I didn’t see two different paragraphs behave differently, so this can be a problem exclusive to Mac.

Answer 1

I think I found a solution:

-webkit-transform: translateZ(0px); 

Forcing hardware acceleration in the parent seems to solve the problem ...

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

Answer 2

Explicit installation of -webkit-font-smoothing: subpixel-antialiased is the best current solution if you want to at least partially avoid the finer, smoother text.

- TL; DR -

Both with Safari and Chrome, where font rendering by default uses subpixel-antialiasing, any CSS that forces GPU-based rendering, like the previous sentences, to use a transform using translateZ, or even just scale, will automatically result in Safari and Chrome “opt out” of smoothing subpixels and smoothing fonts, and instead switch to plain, smooth text that looks a lot lighter and thinner, especially on Safari.

Other answers focused on keeping the rendering constant by simply setting or forcing font smoothing to a finer anti-Asian text. In my opinion, using translateZ or a hidden surface significantly degrades the quality of text rendering and a better solution if you want the text to stay the same and you're fine with thinner text, just use -webkit-font-smoothing: antialiased . However, explicitly setting -webkit-font-smoothing: subpixel-antialiased really has some kind of effect - the text still changes a little and becomes almost noticeably thinner during the transitions displayed on the GPU, but not as thin as without it. Thus, it seems that this at least partially prevents switching to direct anti-Asian text.

UPDATE August 2017

-webkit-font-smoothing: subpixel-antialiased no longer works in Chrome and degrades text in Safari. Advise to avoid.

Answer 3

I noticed that almost every time I have problems with graphics (flickering / stuttering / choppiness / etc) due to a transition, using -webkit-backface-visibility: hidden; on the elements that act, seeks to solve the problem.

Answer 4

To prevent text rendering from changing due to hardware acceleration, you can:

• Set all text to -webkit-font-smoothing: anti-aliasing. This means that the text is finer, not subpixel smoothed.

• If you want the text affected by hardware acceleration to be a smoothed subpixel (the font is smoothed by default), then putting this text inside an input without borders and disabled will contain this sub-pixel smoothing pixel (at least on Chrome OS Mac OS X). I have not tested this on other platforms, but if smoothing subpixels is important, you can at least use this trick.

Answer 5

If you are using Firefox on Mac, you can use the following css to fix the problem.

 -moz-osx-font-smoothing: grayscale; 

Read more on Smoothing and Smoothing Webfont in Firefox and Opera

Answer 6

This is what worked for me. Hope it helps. Found in another stackoverflow entry.

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

Answer 7

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

Disabling the browser from the sub-pixel font is probably a side effect of hardware acceleration. When the background that you drop against constantly moves, the text cannot be displayed on a separate layer, since each frame must be checked at all background levels. This can seriously degrade performance.

Apple often disables subpixel font smoothing on their own sites.

Answer 8

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

Answer 9

I had the same problem. Read carefully:

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

none of the above solutions seem to work. However setting (for example)

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

for an element that has an animation .

When you take an animated element to the GPU level, you take it out of the normal page rendering stream (for example, the ones like z-index no longer work). As a side effect, the animation and the rest of the page will no longer affect each other.

If this affects font rendering, it only does this for an animated element, of course. I do not see the difference in my Chrome.