Webkit-Based Blurry/Distorted Text Post-Animation Via Translate3D

Webkit-based blurry/distorted text post-animation via translate3d

As @Robert mentioned above, sometimes adding background helps, but not always.

So, for the example Dmitry added that's not the only thing you must do: except from the background, you must tell browser to explicitly use the proper anti-aliasing, so, there is a fixed Dmitry's example: http://jsfiddle.net/PtDVF/1/

You need to add these styles around (or for the) blocks where you need to fix the anti-aliasing:

background: #FFF; /* Or the actual color of your background/applied image */
-webkit-font-smoothing: subpixel-antialiased;

WebKit: Blurry text with css scale + translate3d

Webkit treats 3d transformed elements as textures instead of vectors in order to provide hardware 3d acceleration. The only solution to this would be to increase the size of the text and downscaling the element, in essence creating a higher res texture.

See here:
http://jsfiddle.net/SfKKv/

Note that antialiasing is still underpar (stems are lost) so I'm beefing up the text with a bit of text shadow.

Text is blurred when has transform: translate and it is adjacent to another element with an animation

This is not a bug in your code, this is well known Webkit rendering bug. See for example: https://support.mozilla.org/pl/questions/1075185 (and many more threads on FF support forums).

In both Chrome and FF, in advanced browser settings you can turn off what is called "hardware acceleration". This setting exists to let your hardware "help out" browser when in comes to advanced graphics rendering. Hardware acceleration automatically turns on for elements that you use translate and some other rules on. This is actually sometimes used by inexperienced "css hackers" to achieve some better/clearer rendering in some cases.

But sometimes it causes more bad than good and this is your case. Once you turn hardware acceleration off in your browser the font is perfectly clear. Sadly there's no real solution code-wise, you can't force turning it off for a given element. We are dependent on Webkit devs fixing the rendering engine here. You can only hack around, like for example change font size to one which for no real reason renders better. Or change positioning in some way which doesn't involve translate. Best of luck to you.

Chrome animation makes text blurry

Update 2020-10: this issue appears to be resolved in Chrome/Chromium 85+ in my testing. But it is not entirely fixed. You may still encounter blur in places.

Check this comment in the bug report that outlines continuing work to improve how Chrome handles this: https://bugs.chromium.org/p/chromium/issues/detail?id=521364#c103

CSS - Blurry image/text when rezising

I think scale would be more appropriate for this. This solution only blurs during scaling.

.square {  width:100px;  height: 100px;  background-color:black;  margin: 50px;}p {  color:white;  text-align: center;  padding-top: 35px;}.square {  -webkit-transition: -moz-transform .3s ease-out;   -moz-transition: -webkit-transform .3s ease-out;   -o-transition: -o-transform .3s ease-out;   transition: transform .3s ease-out; }.square:hover {  -webkit-transform: scale(2);    -moz-transform: scale(2);      -o-transform: scale(2);  transform: scale(2);}

<div class="square">  <p>Some text</p>                        </div>