Fixing CSS antialiasing on Chrome

I’ve been working on creating mazes with LimeJs and I ran into a problem:

Screen Shot 2014-01-18 at 12.42.13 PM

As you can see, this maze looks like it was rendered by a dying printer: there are horizontal white lines all over the place. I was going crazy trying to track down the cause: the squares were perfectly sized/placed and the padding and margins were all zero pixels. It looked fine in Firefox, just Chrome had the issue. Finally, Andrew figured out that it was antialiasing on pixel borders and, if I offset the images by less than a pixel, they wouldn’t be “rounded off.”

I tried offsetting everything by .5 pixels:

Screen Shot 2014-01-18 at 12.41.57 PM

Better, but not perfect. However, with .1 pixels:

Screen Shot 2014-01-18 at 12.41.34 PM

Good enough!

I made a patch for this but I haven’t made it work for masks so I’m not going to do a pull request for it (yet). However, you can cherry-pick it from my fork of LimeJs and use it by adding the following line to your start() function:

lime.Renderer.DOM.ANTIALIAS_OFFSET.y = .1;

If anyone knows anything about why Chrome antialiases stuff like this, I’d be interested in knowing (I found lots of sites complaining that it was weird, but none explaining it).

Happy hacking!

4 thoughts on “Fixing CSS antialiasing on Chrome

  1. I would try not to fix the offset, but rather to change line width to get rid of the effect, but is just guessed. I assume that the browser wants to render a line and in fact internally uses points instead of pixel, so coordinates between pixel, with a line width of 1px it forces the browser to render 0.5px into top and bottom pixel, which will lead to a color mix like this gray. With a width of 0.5px same effect, just smaller as it the mix changes. If I’am right then the only way to fix it is to ensure that the line with is a multiple of 2 to always have full pixel, so this might solve it (but might cause other issues):

    var so = this.stroke_ ? (x.stroke_.width+1)&0xfffffffe : 0;

    However, just a guess.


    1. Unfortunately, you still get this effect, even with powers of 2.

      Thanks for the suggestion, but stroking won’t work once I’m using non-placeholder sprites.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: