0

I have a swinging div in my page, and it has a text on it. I do the swinging animation with css rotate and jquery. You can see it here http://jsfiddle.net/novellino/Em7ej/

My problem is that the text becomes blurry when the div starts moving. I have tried solutions like adding this:

 -webkit-backface-visibility: hidden;

in the css or this:

 -webkit-transform-origin: 50%  51%;

but still is not working. Does anyone know if and how can I solve this?

Thanks in advance.

novellino
  • 1,069
  • 4
  • 22
  • 51

1 Answers1

0

This is a artifact from the text rendering engines in the browser. The text is not cached but rendered for each change resulting that each individual point is transformed (rotated). Inaccuracies and rounding errors results in the somewhat inconsistent rendering.

To avoid this problem you can render the text to an image first and use that instead. You can do this in two ways:

this has the added benefit of added performance.

Modified fiddle here

var canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d');

canvas.width = 90;
canvas.height = 90;

ctx.fillStyle = '#613a1c';
ctx.font = '16px serif';
ctx.textBaseline = 'top';
ctx.fillText('Hello', 20, 20);
ctx.fillText('I am the', 20, 38);
ctx.fillText('text', 20, 56);

document.getElementById('info_txt').appendChild(canvas);
Community
  • 1
  • 1