Webkit-based blurry/distorted text post-animation

Question

This issue appears to affect all WebKit-based browsers, including the iPhone.

First some background. The site I'm working on uses a JavaScript-based 'slider' animation that is basically identical to this: http://www.assistly.com/product-tour/#/easy-setup

The only difference is that I'm using -webkit-transform: translate3d to 'power' the actual animation. When using this method, as opposed to a JavaScript-based method, the text becomes all blurry once the content has been animated. This is especially noticeable on the iPhone.

A few workarounds I saw were to remove an relative positioning, which I did, and to add a rule for -webkit-font-smoothing: antialiased, which I also did. Neither change made the slightest difference.

The only way I could make this work properly without blurry text was to use regular JavaScript for the animation and bypass the translate3d altogether. I'd prefer to use translate3d because it performs much faster on WebKit-enabled devices, but for the life of me I cannot figure out why it is affecting the text in such a poor way.

Any suggestions or solutions would be greatly appreciated.

Answer 1

I use will-change on these types of issues, it usually solves scaling issues or rounding errors, such as seeing a 1px white line separating elements for example.

will-change: transform;

Read more here: https://developer.mozilla.org/en-US/docs/Web/CSS/will-change

Answer 2

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

Answer 3

I fixed this problem by adding a translate3d style to the element before any animation occurs.

-webkit-transform: translate3d(0,0,0); 

Answer 4

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>

Answer 5

Elements you are translating must be divisible by two with even numbers.

I'ts important that whatever element you're trying to shift over by half is divisible by two for both it's width and height. Very similar to the responsive images, when things can be moved by 50% without splitting pixels.

A div with a width of: 503px and a height of 500px will cause blurring, no matter which way you move it or by how much when using translateX or Y. Using transform, it utilizes GPU graphics accelerator which should result is very crisp, smooth edges. It might also be a good idea to set box-sizing: border-box; to ensure calculated widths include padding and borders.

Be careful when using percentage widths. If it's relative to screen size, ever other screen pixel width will cause this blur.

Answer 6

Probably the easiest solution:

transform: translate(-50%, -50%) scale(2); 
zoom:.5;

Scale-and-zoom takes care of rounding the pixel values to full numbers