Translate + Canvas = Blurry Text

Question

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.

Aristocrat

You found quite the quirk. I can only reproduce this in webkit, and it seems to fix if you just put -webkit-transform: translate(-50.1%,-50%); ... which ruins a true centering, I know :/ – Simba

Of course, only to add to the strangeness of this one, the 50.1% fix does not work for me. – Aristocrat

Are you Mac or PC? I'm on OSX 10.9 – Simba

Chrome 35 and Safari 7 on OSX 10.9 – Aristocrat

If I may make a stupid remark, the Codepen doesn't have the same CSS as the source shown here; there are no -moz- or unprefixed transforms in there, only -webkit- ones. So its results in different browsers are different. – Russom

The transform / blurry text is well documented as a webkit issue and these are reduced test cases, but you're right. I have more closely aligned the two examples. – Aristocrat

Not sure if it helps, but you might wanna use precentage on text if you dont, another fix can be to add a few more layers of same text on each other... Well just something I read somewehre, dont know where lol, good luck anyways :D – Constraint

In my case it was fixed with -webkit-transform: translate(-50.1%,-50.1%); – Resurrectionist