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;

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>

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%);