Is it possible to “snap to pixel” after a CSS translate?

Question

I created a modal box and vertically centred it using a technique Chris Coyer mentioned. The only problem I\'ve found with it so far is that sometimes the box is offset by half

Answer 1

The only bulletproof solution is to ensure that your element occupies an even number of pixels. If the height (or width) is not divisible by 2, then it will attempt to render your element on a half-pixel, causing the blurriness.

Firefox doesn't have this issue because it supports true subpixel rendering. So, even though your element is on a half-pixel, Firefox handles it elegantly.

In my experience, Webkit typically snaps elements to the nearest pixel –– (for instance, when using the letter-spacing property) -- so it's kinda strange that it doesn't behave the same way for translate.