Translate + Canvas = Blurry Text

问题

There are more than a few "CSS transform = blurry text" entries on SO already but I think I have a unique doozy here. I have tried all the other fixes with no avail.

I'm implementing the CSS transform center / middle align method:

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: translate(-50%,-50%);
}

Once I apply an image via drawImage AND resize the canvas that is underneath the .centered element, the text starts blurring on the "half pixel". The -webkit-transform-style: preserve-3d fix has no effect. This only happens in Chrome and Safari.

Here's a pen with a reduced test case: http://codepen.io/andrewtibbetts/pen/owzJa

By resizing the window, you'll notice that the blurring stops if the text is not directly above the canvas.

来源：https://stackoverflow.com/questions/24393224/translate-canvas-blurry-text