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

None of these seem to have worked for me but I've found a slightly dirty solution which seemed to do the trick:

top: 49.9%;left: 49.9%;-webkit-transform: translate(-50.1%, -50.1%);transform: translate(-50.1%, -50.1%);

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;

I had the exact same problem described in Ken Avila's post: CSS: transform: translate(-50%, -50%) makes texts blurry

The problem was of course that I used transform: translate(-50%, -50%) which made my centered content become blurry, but only in safari on osx.

It is not only the text that becomes blurry, but the entire content, including images.I read on: http://keithclark.co.uk/articles/gpu-text-rendering-in-webkit/that the "blurryness" is due to that the element is rendered on a non-integer boundary.

I also discovered that I could avoid using transform translate on the horizontal part of my centering from this post: https://coderwall.com/p/quutdq/how-to-really-center-an-html-element-via-css-position-absolute-fixed -The only minus was that I had to introduce a wrapper.

I discovered that using transform: translateY(-50%) didn't create any "bluryness", maybe because my element has a set height and thus does not end up rendering on a non-integer boundary.

My solution therefore ended up like this:

.wrapper {  position: fixed;  left: 50%;  top: 50%;}.centered {  position: relative;  left: -50%;  -webkit-transform: translateY(-50%);  -ms-transform: translateY(-50%);  transform: translateY(-50%);}

<div class="wrapper">  <div class="centered">    Content  </div></div>