翻译+画布=模糊文字

Question

SO已经有不止一些“CSS转换=模糊文本”条目，但我想我在这里有一个独特的doozy。我已经尝试了所有其他修复，但没有用。

我正在实现CSS转换中心/中间对齐方法：

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

通过drawImage应用图像并调整.centered元素下面的画布大小后，文本开始在“半像素”上模糊。 -webkit-transform-style: preserve-3d修复无效。这只发生在Chrome和Safari中。

这是一支减少测试用例的笔：http://codepen.io/andrewtibbetts/pen/owzJa

通过调整窗口大小，您会注意到如果文本不在画布正上方，模糊会停止。