css - 翻译 + 画布 = 模糊文本

Question

SO 上已经有不少“CSS 转换 = 模糊文本”条目，但我认为我在这里有一个独特的笨拙。我已经尝试了所有其他修复但无济于事。

我正在实现 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

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